关于vue3:推荐非常详细的vite开发笔记7k字

为什么要降级到 vue3.0

当将以后的技术栈从 Vue 2.0 降级到 Vue 3.0 时，有许多值得思考的理由。以下是 10 个降级到 Vue 3.0 的理由：

1. 更好的性能: Vue 3.0 引入了一种全新的响应式零碎，应用了 Proxy 代理，相比 Vue 2.0 中的 Object.defineProperty，在性能方面有显著的晋升。这意味着更快的渲染速度和更高的性能。
2. 更小的文件大小: Vue 3.0 通过应用模块化的设计和 Tree-shaking 技术，使得打包后的文件更小。这能够缩小初始加载工夫并进步应用程序的整体性能。
3. Composition API: Vue 3.0 引入了 Composition API，这是一种新的组件组织形式，可能更好地组织和重用逻辑代码。相比于 Vue 2.0 的 Options API，Composition API 提供了更灵便、可组合和可保护的代码构造。
4. TypeScript 反对: Vue 3.0 在设计时思考了更好的 TypeScript 反对，提供了更好的类型推断和类型查看。这使得在 Vue 3.0 我的项目中应用 TypeScript 更加容易和高效。
5. Teleport: Vue 3.0 引入了 Teleport（传送门）个性，它能够帮忙您在 DOM 中的任何地位渲染组件。这对于在应用程序中创立弹出窗口、对话框或告诉等动静内容十分有用。
6. Fragments: Vue 3.0 引入了片段（Fragments）个性，能够让您在不额定减少 DOM 节点的状况下渲染多个元素。这进步了组件的可读性和灵活性。
7. 新的组件生命周期钩子: Vue 3.0 引入了一些新的组件生命周期钩子函数（如setup），用于更好地管制组件的初始化和渲染过程。这使得编写和治理组件更加直观和灵便。
8. 更好的 TypeScript 反对: Vue 3.0 在设计上思考到了更好的 TypeScript 反对，提供了更好的类型推断和类型查看。这使得在 Vue 3.0 我的项目中应用 TypeScript 更加容易和高效。
9. 更好的开发工具反对: Vue 3.0 的公布也随同着更新的 Vue Devtools，以反对新的 API 和性能。这将大大提高开发者在调试和剖析 Vue 3.0 应用程序时的效率。
10. 良好的生态系统反对: 只管 Vue 3.0 是一个较新的版本，但它曾经开始逐步取得更多的反对和生态系统的迁徙。许多罕用的 Vue 插件和库也已更新以反对 Vue 3.0，这为降级提供了更好的反对和生态环境。

这些理由强调了从 Vue 2.0 降级到 Vue 3.0 的许多劣势和潜在益处。然而，在理论降级过程中，请务必测试和验证您的应用程序是否与 Vue 3.0 版本兼容，并依据您的我的项目需要和工夫限度来评估降级的收益和危险。

怎么应用 vue3.0 呢？

vite 中文网：https://cn.vitejs.dev/guide/

应用 NPM:
bash

$ npm create vite@latest

应用 Yarn:
bash

$ yarn create vite

应用 PNPM:
bash

$ pnpm create vite

装置依赖项

pnpm install

运行

pnpm dev

相熟罕用的 API

Vite 提供了多个罕用的 API 用于创立和配置我的项目。以下是一些常见的 Vite API：

1. createApp(): 这是 Vite 中最罕用的 API 之一，用于创立应用程序实例。它返回一个实例，您能够应用该实例来注册全局组件、挂载应用程序以及执行其余应用程序级别的操作。

import {createApp} from 'vue';

const app = createApp();

2. use(): use 办法用于注册插件或中间件。您能够应用此办法在应用程序中应用各种插件、路由器、状态治理等性能。

app.use(plugin);

3. mount(): mount 办法用于将应用程序挂载到特定的 DOM 元素上。您须要指定一个 DOM 选择器作为参数，以确定挂载的地位。

app.mount('#app');

4. component(): component 办法用于注册全局组件。您能够应用此办法将组件注册为全局可用，以便在应用程序中的任何中央应用它。

app.component('my-component', MyComponent);

5. directive(): directive 办法用于注册全局指令。您能够应用此办法注册自定义指令，以便在模板中应用它们来操作 DOM 元素。

app.directive('my-directive', myDirective);

6. provide() / inject(): provide 和 inject 办法用于在父组件中提供数据，并在子组件中注入数据。这是一种用于跨组件档次传递数据的高级技术。

app.provide('myData', data);

在子组件中：

const myData = inject('myData');

这些是一些 Vite 罕用的 API，能够帮忙您创立、配置和治理我的项目中的组件、插件和应用程序状态。Vite 还提供了其余一些 API，如路由器和状态治理的 API，您能够依据须要查阅 Vite 的官网文档以获取更多详细信息和用法示例。

罕用的 API 及其应用形式

当应用 Vue 3 和 Vite 进行开发时，您还能够应用一些其余的 API 来解决数据响应式和操作 DOM 元素。以下是几个常见的 API：

1. ref(): ref 函数用于创立一个响应式援用。它承受一个初始值作为参数，并返回一个可通过 .value 属性拜访的响应式对象。当援用的值发生变化时，相干的组件将主动从新渲染。

import {ref} from 'vue';

const count = ref(0);
console.log(count.value); // 输入：0
count.value++; // 批改援用的值
console.log(count.value); // 输入：1

2. reactive(): reactive 函数用于创立一个响应式对象。它接管一个一般对象作为参数，并返回一个响应式的代理对象。当代理对象的属性发生变化时，相干的组件将主动从新渲染。

import {reactive} from 'vue';

const state = reactive({
  message: 'Hello',
  count: 0
});
console.log(state.message, state.count); // 输入：Hello 0
state.message = 'Hi'; // 批改响应式对象的属性
state.count++; // 批改响应式对象的属性
console.log(state.message, state.count); // 输入：Hi 1

3. toRefs(): toRefs 函数用于将一个响应式对象的属性转换为具备 .value 属性的一般援用。这对于在应用 reactive 创立的对象作为组件的 props 时特地有用。

import {reactive, toRefs} from 'vue';

const state = reactive({
  message: 'Hello',
  count: 0
});
const stateRefs = toRefs(state);
console.log(stateRefs.message.value, stateRefs.count.value); // 输入：Hello 0

4. watch(): watch 函数用于察看响应式数据的变动并执行相应的操作。您能够应用 watch 监督单个响应式值、多个响应式值或副作用函数的变动。

import {reactive, watch} from 'vue';

const state = reactive({count: 0});
watch(() => state.count, // 要监督的响应式数据
  (newCount, oldCount) => {console.log(`Count changed from ${oldCount} to ${newCount}`);
  }
);
state.count++; // 输入：Count changed from 0 to 1

这些是解决数据响应式和操作 DOM 元素时罕用的 API。Vue 3 的响应式零碎在解决状态治理和组件间数据传递方面十分弱小和灵便。您能够依据需要应用这些 API 来构建动静和交互式的应用程序。请记住，在 Vite 中应用这些 API 时，您须要导入相应的函数和模块，如示例中所示。

其余的 API(vue3 响应式相干知识点)

    响应式: 外围
        ref()承受一个外部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其外部值的属性 .value。computed ()承受一个 getter 函数，返回一个只读的响应式 ref 对象。该 ref 通过 .value 裸露 getter 函数的返回值。它也能够承受一个带有 get 和 set 函数的对象来创立一个可写的 ref 对象。reactive()返回一个对象的响应式代理。readonly()承受一个对象 (不论是响应式还是一般的) 或是一个 ref，返回一个原值的只读代理。watchEffect()立刻运行一个函数，同时响应式地追踪其依赖，并在依赖更改时从新执行。watch()侦听一个或多个响应式数据源，并在数据源变动时调用所给的回调函数。响应式: 工具
        isRef()查看某个值是否为 ref。unref()如果参数是 ref，则返回外部值，否则返回参数自身。这是 val = isRef(val) ? val.value : val 计算的一个语法糖。toRef()基于响应式对象上的一个属性，创立一个对应的 ref。这样创立的 ref 与其源属性放弃同步：扭转源属性的值将更新 ref 的值，反之亦然。toRefs()将一个响应式对象转换为一个一般对象，这个一般对象的每个属性都是指向源对象相应属性的 ref。每个独自的 ref 都是应用 toRef() 创立的。isProxy()查看一个对象是否是由 reactive()、readonly()、shallowReactive() 或 shallowReadonly() 创立的代理。isReactive()查看一个对象是否是由 reactive() 或 shallowReactive() 创立的代理。isReadonly()查看一个对象是否是由 readonly() 或 shallowReadonly() 创立的代理。响应式: 进阶
        shallowRef()ref() 的浅层作用模式。triggerRef()强制触发依赖于一个浅层 ref 的副作用，这通常在对浅援用的外部值进行深度变更后应用。customRef()创立一个自定义的 ref，显式申明对其依赖追踪和更新触发的管制形式。shallowReactive()reactive() 的浅层作用模式。shallowReadonly()readonly() 的浅层作用模式
        toRaw()依据一个 Vue 创立的代理返回其原始对象。markRaw()将一个对象标记为不可被转为代理。返回该对象自身。

加强的性能

当应用 Vite 进行开发时，还有一些其余的 API 和个性可用于加强您的开发教训。以下是一些常见的 API 和个性：

1. watchEffect(): watchEffect 函数用于创立一个副作用函数，该函数会主动追踪其依赖的响应式数据，并在其依赖项发生变化时主动执行。它相似于 watch，但不提供先前值的追踪。

import {reactive, watchEffect} from 'vue';

const state = reactive({count: 0});

watchEffect(() => {console.log(`Count is: ${state.count}`);
});

state.count++; // 输入：Count is: 1

2. computed(): computed 函数用于创立一个计算属性，它依据其依赖的响应式数据进行计算，并返回一个响应式的后果。计算属性是惰性求值的，只有在其依赖项发生变化时才从新计算。

import {reactive, computed} from 'vue';

const state = reactive({count: 0});

const doubleCount = computed(() => state.count * 2);

console.log(doubleCount.value); // 输入：0

state.count++;

console.log(doubleCount.value); // 输入：2

3. onMounted() / onUnmounted(): onMounted 和 onUnmounted 是生命周期钩子函数，在组件挂载和卸载时别离执行指定的回调函数。它们用于执行一些与组件生命周期相干的操作。

import {onMounted, onUnmounted} from 'vue';

onMounted(() => {console.log('Component mounted');
});

onUnmounted(() => {console.log('Component unmounted');
});

4. createRouter(): createRouter 函数用于创立路由器实例，用于管理应用程序的路由。您能够应用该实例定义路由规定、导航和监听路由变动。

import {createRouter, createWebHistory} from 'vue-router';

const router = createRouter({history: createWebHistory(),
  routes: [{ path: '/', component: Home},
    {path: '/about', component: About}
  ]
});

app.use(router);

5. createStore(): createStore 函数用于创立一个全局状态治理的 store，用于共享和管理应用程序的状态。它提供了状态的存储、批改和派发操作。

import {createStore} from 'vuex';

const store = createStore({state() {
    return {count: 0};
  },
  mutations: {increment(state) {state.count++;}
  },
  actions: {asyncIncrement(context) {setTimeout(() => {context.commit('increment');
      }, 1000);
    }
  }
});

app.use(store);

这些是 Vite 中罕用的一些 API 和个性，可用于解决副作用、计算属性、生命周期、路由和状态治理等方面。有了这些功能强大的 API，您能够更好地开发出高效、可扩大和交互式的应用程序。请留神，这些示例中的 API 来自 Vue 3 的生态系统，但在 Vite 中应用办法相似，只需依据须要导入相应的函数和模块。

生命周期

setup 中也有新的生命周期 onBeforeMount -> onMounted -> onBeforeUpdate -> onUpdated -> onBeforeUnmount -> onUnmounted -> onErrorCaptured 跟 options api 混用时 onBeforeMount 在 beforeMount 之前，onMounted 在 mounted 之前。。。之后都是。

vue 中父子程序 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted 在 setup 中申明周期同样。

路由的用法

十分道歉，Vite 中的路由跳转的确不须要应用 this。以下是在 Vite 中进行路由跳转的示例：

1. 装置和配置 vue-router：在我的项目目录中应用以下命令装置 vue-router：

npm install vue-router@next

而后，在我的项目的入口文件（通常是 main.js 或 main.ts）中进行配置：

import {createApp} from 'vue';
import App from './App.vue';
import {createRouter, createWebHashHistory} from 'vue-router';

// 导入组件
import Home from './components/Home.vue';
import About from './components/About.vue';

// 创立路由实例
const router = createRouter({history: createWebHashHistory(),
  routes: [{ path: '/', component: Home},
    {path: '/about', component: About}
  ]
});

// 创立 Vue 应用程序实例并应用路由
const app = createApp(App);
app.use(router);
app.mount('#app');

2. 在组件中应用路由

在 AppComponent.vue 组件模板中，您能够应用 <router-link> 组件来导航到不同的页面，应用 <router-view> 组件来显示以后匹配的路由组件。

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
  </div>
</template>

3. 跳转到不同的路由

要在组件或办法中进行路由跳转，能够应用 useRouter 函数获取路由实例，而后应用 push 办法进行跳转。

import {useRouter} from 'vue-router';

export default {setup() {const router = useRouter();

    const goToAbout = () => {router.push('/about');
    };

    return {goToAbout};
  }
};

通过 useRouter 获取到的 router 实例能够间接应用 push 办法进行路由跳转，无需通过 this。在组件的 setup 函数中，通过定义一个 goToAbout 办法并应用 router.push 进行跳转。

请确保已正确导入 vue-router 相干的模块和组件，并在 Vue 应用程序实例中应用路由实例。这样，您就能够应用 <router-link> 组件或编程式导航实现路由跳转，而无需应用 this。

获取路由传递的参数

在 Vite 中，能够应用 useRoute 函数来获取以后路由的信息，包含路由参数。以下是一个在路由中获取参数的示例：

1. 装置和配置 vue-router：在我的项目目录中应用以下命令装置 vue-router：

npm install vue-router@next

而后，在我的项目的入口文件（通常是 main.js 或 main.ts）中进行配置：

import {createApp} from 'vue';
import App from './App.vue';
import {createRouter, createWebHashHistory} from 'vue-router';

// 导入组件
import Home from './components/Home.vue';
import About from './components/About.vue';

// 创立路由实例
const router = createRouter({history: createWebHashHistory(),
  routes: [{ path: '/', component: Home},
    {path: '/about/:id', component: About}
  ]
});

// 创立 Vue 应用程序实例并应用路由
const app = createApp(App);
app.use(router);
app.mount('#app');

2. 在组件中获取路由参数

在 About.vue 组件中，能够应用 useRoute 函数来获取路由信息，包含参数。以下是一个获取路由参数并显示在组件中的示例：

<template>
  <div>
    <h2>About Page</h2>
    <p>Current route params: {{routeParams}}</p>
  </div>
</template>

<script>
import {useRoute} from 'vue-router';

export default {setup() {const route = useRoute();
    const routeParams = route.params;

    return {routeParams};
  }
};
</script>

在上述示例中，通过 useRoute 获取到以后路由的信息，并将参数存储在 routeParams 变量中。而后，能够在模板中应用 routeParams 来显示路由参数。

请留神，路由参数通常应用 : 定义，并在路由定义中进行配置（例如：/about/:id）。在组件中应用 useRoute 函数能够轻松地获取这些参数并在组件中应用。

这样，您就能够在 Vite 中通过 useRoute 函数获取路由传递的参数，而无需应用 this。

罕用的 hook 有哪些

在 Vite 我的项目中，您能够应用以下罕用的 Vue Composition API 钩子函数（Hooks）：

1. setup(): setup 函数是组件内应用的次要入口点。它是一个非凡的钩子函数，用于设置组件的初始状态、解决响应式数据和副作用等。能够在 setup 函数中返回组件的数据、办法和计算属性等，使其在模板中可用。
2. onMounted(): onMounted 是在组件挂载到 DOM 之后执行的钩子函数。您能够在其中执行一些初始化的异步操作、增加事件监听器等。
3. onUnmounted(): onUnmounted 是在组件从 DOM 中卸载之前执行的钩子函数。您能够在其中清理定时器、勾销订阅、解绑事件监听器等。
4. watch(): watch 是一个用于察看响应式数据变动的钩子函数。您能够应用 watch 监听特定的响应式变量，并在其值发生变化时执行相应的操作，例如执行网络申请、计算依赖等。
5. reactive(): reactive 函数用于创立响应式对象。您能够应用它将一般对象转换为响应式对象，从而使其在数据更新时主动触发 UI 的从新渲染。
6. ref(): ref 函数用于创立一个包装器，将原始值转换为响应式对象。常见的用法是用于包装根本类型的数据，如数字、布尔值等。
7. computed(): computed 是一个计算属性的工具函数。您能够应用 computed 创立一个响应式的计算属性，依据依赖的响应式数据进行计算，并在其依赖变动时自动更新。

8. provide() 和 inject(): provide 和 inject 是为了实现跨组件通信而引入的 API。

   • provide 函数用于在一个先人组件中提供数据，以便后辈组件能够通过 inject 函数进行注入应用。这样，您能够在不通过 props 传递的状况下，在组件之间共享数据。
   • inject 函数用于从先人组件中注入数据，以便在以后组件中应用。它承受一个可选的默认值，在没有找到提供的数据时能够提供一个备用值。

以上是一些在 Vite 我的项目中罕用的 Vue Composition API 钩子函数。应用这些钩子函数能够更好地组织和治理组件的状态、副作用和逻辑。除了这些罕用的钩子函数，还有许多其余的钩子函数可依据须要应用，具体依据我的项目的需要而定。

如何封装一个组件

道歉，我之前提供的代码中没有应用 setup 语法糖模式。以下是应用 setup 语法糖的修改代码：

<template>
  <div>
    <h2>{{greeting}}</h2>
    <button @click="incrementCount">{{buttonText}}</button>
    <p>Count: {{count}}</p>
  </div>
</template>

<script setup>
import {ref, computed} from 'vue';

// Props
const props = defineProps({
  buttonText: {
    type: String,
    default: 'Click me' // 默认值为 'Click me'
  }
});

// 响应式数据
const count = ref(0);

// 计算属性
const greeting = computed(() => `Hello, count is ${count.value}`);

// 办法
const incrementCount = () => {count.value++;};
</script>

在修改后的代码中，咱们应用了 script setup 的语法糖模式。在这种模式下，咱们无需明确指定 setup 函数，而是将变量和逻辑间接放在 <script> 标签中的 script setup 中。

通过 defineProps 函数来申明和验证组件的 props，并赋值给 props 变量。响应式数据、计算属性和办法都能够在 script setup 中间接定义，无需显式返回一个对象。

这样，咱们便应用了 setup 的语法糖模式来封装一个接管参数的组件。您能够像之前领导的那样应用组件并传递自定义的参数值。

如何封装 hook

如果您要在 Vite 中封装两个办法，一个是减少函数，一个是缩小函数，并应用 use 结尾封装成自定义的 Hook，您能够依照以下示例进行编写。

// useCounter.js

import {ref} from 'vue';

export function useCounter() {
  // 响应式数据
  const count = ref(0);

  // 减少函数
  function increment() {count.value++;}

  // 缩小函数
  function decrement() {count.value--;}

  // 返回自定义的 Hook
  return {
    count,
    increment,
    decrement
  };
}

在上述代码中，咱们创立了一个名为 useCounter 的自定义 Hook。通过 ref 函数，咱们将 count 变量转换为响应式数据。而后，咱们定义了 increment 函数和 decrement 函数来减少或缩小 count 的值。

最初，咱们将 count、increment 和 decrement 返回为一个对象，使其能够在组件中应用。

在组件中应用这个自定义 Hook 的示例：

<template>
  <div>
    <h2>Count: {{counter}}</h2>
    <button @click="increment">Increase</button>
    <button @click="decrement">Decrease</button>
  </div>
</template>

<script setup>
import {useCounter} from './useCounter';

// 应用自定义的 Hook
const {count, increment, decrement} = useCounter();
</script>

在上述示例中，咱们引入了自定义的 useCounter Hook，并应用解构赋值从 Hook 返回的对象中获取到 count、increment 和 decrement。这样，咱们就能够在模板中间接应用这些变量和函数了。

通过这种形式，您能够依照习惯的命名形式将逻辑封装成自定义的 Hook，并在多个组件中共享和重复使用这些逻辑。应用 use 结尾的自定义 Hook 能够让咱们更好地复用逻辑和保护代码。

proxy 和 Reflect 对象

Proxy 和 Reflect 是 JavaScript 的两个内置对象，它们在 ECMAScript 6 (ES6) 中引入，并为开发者提供了对对象行为的拦挡和批改能力。

Proxy 对象用于定义自定义行为以拦挡指标对象的操作。通过应用 Proxy，咱们能够拦挡对指标对象的操作，比方拜访属性、批改属性、调用办法等，并能够在拦截器中自定义相应的行为。这使得咱们能够在运行时对对象进行拦挡和批改，实现诸如属性校验、数据劫持、日志记录等性能。

上面是应用 Proxy 的一个示例：

const target = {}; // 指标对象

const handler = {get: function (target, propKey, receiver) {console.log(` 正在拜访属性：${propKey}`);
    return Reflect.get(target, propKey, receiver);
  },
  set: function (target, propKey, value, receiver) {console.log(` 正在设置属性：${propKey} = ${value}`);
    return Reflect.set(target, propKey, value, receiver);
  }
};

const proxy = new Proxy(target, handler); // 创立代理对象

proxy.name = 'John'; // 设置属性：name = John
console.log(proxy.name); // 拜访属性：name

在上述示例中，咱们创立了一个空对象 target 作为指标对象，而后定义了一个 handler 对象，其中应用了 get 和 set 拦截器来拦挡对指标对象属性的拜访和批改操作。在拦截器中，咱们打印了相应的日志，并应用 Reflect 对象调用原始的操作。

最初，咱们应用 new Proxy() 创立了一个代理对象 proxy，该代理对象会拦挡对指标对象的操作。当咱们通过代理对象设置属性 proxy.name = 'John' 时，拦截器会触发并打印日志；当咱们通过代理对象拜访属性 proxy.name 时，拦截器同样会触发并打印日志。

Reflect 对象提供了一组与对象操作相干的办法，这些办法与对象操作的默认行为绝对应。通过应用 Reflect，咱们能够在代码中更不便、更统一地调用和解决对象操作，而不须要间接操作指标对象。

上面是应用 Reflect 的一个示例：

const obj = {
  name: 'John',
  age: 25
};

console.log(Reflect.has(obj, 'name')); // 判断 obj 中是否存在属性 name

const values = Reflect.ownKeys(obj); // 获取 obj 的所有属性

values.forEach(key => {console.log(Reflect.get(obj, key)); // 获取 obj 中每个属性的值
});

在上述示例中，咱们应用 Reflect.has() 办法来判断 obj 中是否存在属性 name。接下来，咱们应用 Reflect.ownKeys() 办法获取 obj 的所有属性，并通过 forEach 循环遍历获取到的属性，而后应用 Reflect.get() 办法获取每个属性的值，并打印输出。

Reflect 提供了一系列办法，例如 get()、set()、deleteProperty()、apply() 等，通过这些办法，咱们能够更不便地对对象进行操作，同时也使代码更加易读和统一。

Proxy 和 Reflect 的组合应用能够使咱们更灵便地拦挡和批改对象的操作，并提供了对 JavaScript 对象行为的细粒度管制。

全局状态治理 vuex 在组件中应用（setup 语法糖）

store 也是用过 userStore 函数来创立的。
通过
import{useStore}from’vuex’
const store=useStore();
来创立一个 store，就能够应用本人定义的全局状态属性和各种办法了。

<script setup>
  import {useStore} from 'vuex'
    const store = useStore();
    console.log(store._state.data.xxx);// 调用 state 变量
    console.log(store._mutations.xxxFn());// 调用 mutations 函数
</script>

setup 中的 async 和 await

咱们学习 async 和 await 进行异步操作的时候，都晓得他们要配合应用，否则会报错。
在 setup 语法糖外面，能够间接应用 awiat 而不须要再应用 async，因为 setup 会主动变成 async setup
这个应用起来还是很不便的。

<script setup>
  import UserApi from '../api/UserApi'
  const data = await UserApi.getUserData()
  console.log(data)
</script>

组件的传参

在 Vue 3 的 Composition API 中，setup() 函数中没有间接拜访实例的 this。在这种状况下，你能够应用 context 对象来拜访父级组件的属性和办法。以下是两种不应用 this 来给父级组件发送数据的办法：

1. 应用事件：

子组件示例：

<template>
  <button @click="sendData"> 发送数据 </button>
</template>

<script>
import {getCurrentInstance} from 'vue';

export default {setup() {const instance = getCurrentInstance();

    const sendData = () => {
      const data = 'Hello!';
      instance.emit('data', data); // 触发自定义事件，并传递数据
    };

    return {sendData};
  }
};
</script>

父级组件示例：

<template>
  <div>
    <child-component @data="handleData"></child-component>
  </div>
</template>

<script>
export default {
  methods: {handleData(data) {console.log('接管到数据:', data);
      // 在这里解决接管到的数据
    }
  }
};
</script>

在子组件中，通过 instance.emit('data', data) 触发一个名为 data 的自定义事件，并将 data 作为参数传递给父级组件。在父级组件中，应用 @data="handleData" 绑定该自定义事件，并在 handleData 办法中接管传递的数据。

2. 应用 provide/inject：

父级组件示例：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import {provide, getCurrentInstance} from 'vue';

export default {setup() {const instance = getCurrentInstance();
    const data = 'Hello!';
    provide('data', data); // 提供数据给子组件

    // 在父级组件上注册办法，供子组件调用
    instance.appContext.config.globalProperties.handleData = (data) => {console.log('接管到数据:', data);
      // 在这里解决接管到的数据
    };
  }
};
</script>

子组件示例：

<template>
  <div>{{injectedData}}</div>
</template>

<script>
import {inject, getCurrentInstance} from 'vue';

export default {setup() {const instance = getCurrentInstance();
    const injectedData = inject('data'); // 注入传递的数据

    const sendDataToParent = () => {instance.appContext.config.globalProperties.handleData(injectedData);
    };

    return {
      injectedData,
      sendDataToParent
    };
  }
};
</script>

在父级组件中，应用 provide('data', data) 提供了一个名为 'data' 的数据给子组件。同时，咱们应用 instance.appContext.config.globalProperties 注册了一个名为 handleData 的办法，在子组件中能够调用该办法将数据传递给父级组件进行解决。

在子组件中，应用 inject('data') 注入并接管了父级组件提供的数据，并将其绑定到 injectedData 变量上。而后，通过 instance.appContext.config.globalProperties.handleData(injectedData) 调用父级组件中的 handleData 办法，将数据传递给父级组件进行解决。

这两种形式均防止了间接应用 this，并合乎 Vue 3 的 Composition API 的用法。

css 应用变量

在 Vue 的组件中，你能够应用 setup() 函数来定义变量，并将其传递到模板中的款式中。

上面是一个示例，演示如何在 setup() 函数中定义色彩变量，并将其传递到组件款式中：

<template>
  <div class="my-component">Hello, Vite!</div>
</template>

<script>
import {ref} from 'vue';

export default {setup() {const primaryColor = ref('#ff0000');
    const secondaryColor = ref('#00ff00');

    return {
      primaryColor,
      secondaryColor
    };
  }
};
</script>

<style>
.my-component {color: var(--primary-color);
  background-color: var(--secondary-color);
}
</style>

在下面的示例中，咱们应用了 ref 函数来创立可响应式的变量 primaryColor 和 secondaryColor。而后，咱们将这些变量从 setup() 函数返回，使其能够在模板中拜访到。

在款式中，咱们能够应用 var() 函数援用这些变量，并将它们利用于对应的 CSS 属性。这样，当 primaryColor 或 secondaryColor 的值产生扭转时，款式也会自动更新。

请留神，setup() 函数是 Vue 3 中的 Composition API 的一部分，它提供了更灵便和功能丰富的组件编写形式。应用 setup() 函数能够不便地定义和传递变量到组件的模板和款式中，以实现更高度的可定制化。