「Vue3系列」Vue3 组合式 API

news/2024/7/27 7:52:25/文章来源:https://blog.csdn.net/xuaner8786/article/details/136566375

文章目录

一、Vue3 组合式 API
二、Vue3 setup 组件
三、Vue3 组合式 API 生命周期钩子
四、vue3 模板引用
五、相关链接

一、Vue3 组合式 API

Vue 3 引入了组合式 API（Composition API），它是一种新的 API，用于构建 Vue 组件的逻辑。这种 API 解决了大型组件中逻辑难以组织和复用的问题，并提供了更灵活的方式来组织和共享代码。

组合式 API 的核心思想是将组件的逻辑分割成更小的函数（或称为“组合函数”），这些函数可以根据需要被引入和重用。这有助于将组件的逻辑划分为更小的、更易于管理的部分，并提高了代码的可读性和可维护性。

以下是一些组合式 API 的关键特性：

响应式状态：使用 ref 和 reactive 函数创建响应式数据。当这些数据发生变化时，Vue 会自动更新相关的 DOM。
计算属性：使用 computed 函数创建计算属性，这些属性是基于其他响应式数据计算得出的。计算属性会缓存结果，只有在依赖的数据发生变化时才会重新计算。
侦听器：使用 watch 函数来侦听响应式数据的变化，并在数据变化时执行回调函数。
生命周期钩子：Vue 3 提供了与选项式 API 类似的生命周期钩子函数，但它们是作为函数导入的，而不是作为组件选项定义的。
提供/注入：使用 provide 和 inject 函数在组件树中传递数据。这允许父组件向其后代组件提供数据，而无需通过 props 逐层传递。
依赖注入：组合式 API 还提供了更高级的依赖注入机制，允许跨组件共享逻辑。
组合函数：你可以创建自己的组合函数来封装可重用的逻辑。这些函数可以接收响应式数据作为参数，并返回新的响应式数据或执行其他操作。

使用组合式 API，你可以更灵活地组织和管理 Vue 组件的逻辑。它特别适用于大型、复杂的组件，以及需要共享和重用逻辑的场景。

下面是一个简单的示例，展示了如何使用组合式 API 创建一个简单的计数器组件：

<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button></div>
</template><script>
import { ref } from 'vue';export default {setup() {const count = ref(0);const increment = () => {count.value++;};return {count,increment,};},
};
</script>

在这个示例中，setup 函数是组合式 API 的入口点。我们使用 ref 函数创建了一个响应式数据 count，并定义了一个 increment 函数来递增 count 的值。最后，我们通过返回一个对象来暴露这些响应式数据和函数，以便在模板中使用。

二、Vue3 setup 组件

在 Vue 3 中，setup 函数是组合式 API 的核心，它提供了一个新的逻辑组织方式，允许你使用响应式状态、计算属性、方法、生命周期钩子等，而不必依赖于 Vue 组件的选项对象。setup 函数在组件被创建之前调用，并且在 beforeCreate 和 created 生命周期钩子之前执行。

setup 函数接收两个参数：

props：一个对象，包含了组件的属性（props）。
context：一个对象，提供了 attrs、slots、emit 等组件实例的属性。

setup 函数返回一个对象，该对象中的属性将在模板中作为组件的响应式状态、方法或计算属性来使用。

下面是一个使用 setup 函数的 Vue 3 组件示例：

<template><div><p>Count: {{ count }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template><script>
import { ref, computed } from 'vue';export default {props: {initialCount: {type: Number,default: 0,},},setup(props, context) {// 创建响应式状态const count = ref(props.initialCount);// 创建方法const increment = () => {count.value++;};const decrement = () => {count.value--;};// 创建计算属性const doubleCount = computed(() => count.value * 2);// 返回给模板使用的响应式状态、方法和计算属性return {count,increment,decrement,doubleCount,};},
};
</script>

在这个示例中，setup 函数接收 props 和 context 参数，并创建了一个响应式状态 count，以及两个方法 increment 和 decrement。此外，还创建了一个计算属性 doubleCount，它会根据 count 的值计算出一个双倍的数值。最后，setup 函数返回了一个对象，包含了这些响应式状态、方法和计算属性，这样它们就可以在模板中被使用了。

注意，由于 setup 函数在组件的 beforeCreate 和 created 生命周期钩子之前执行，因此它不能访问到 this 上下文。所有的响应式状态、方法和计算属性都应该通过 setup 函数的返回值来暴露给模板。

如果你使用了 <script setup> 语法糖（这是 Vue 3.1+ 提供的一个特性），那么 setup 函数会隐式地创建，并且你可以直接在 <script setup> 标签内部编写组件的逻辑，而无需显式地定义 setup 函数。这使得组件的编写更加简洁和直观。

三、Vue3 组合式 API 生命周期钩子

「Vue3系列」Vue3 组合式 API 生命周期钩子

四、vue3 模板引用

在 Vue 3 中，模板引用（Template Refs）是一种用于直接访问模板中 DOM 元素或子组件实例的技术。通过模板引用，你可以在组件的 JavaScript 代码中引用模板中的特定元素或组件，从而能够直接操作它们或访问它们的属性和方法。

在 Vue 3 中，你可以使用 ref 函数来创建模板引用。这个 ref 函数不同于用于创建响应式数据的 ref 函数，它是专门用于模板引用的。

下面是一个简单的示例，展示了如何在 Vue 3 中使用模板引用：

<template><div><input ref="myInput" type="text" /><button @click="focusInput">Focus Input</button></div>
</template><script>
import { ref, onMounted } from 'vue';export default {setup() {// 创建模板引用const myInput = ref(null);// 方法：使输入框获得焦点const focusInput = () => {myInput.value.focus();};// 在组件挂载后打印输入框的值（可选）onMounted(() => {console.log(myInput.value); // 输出 DOM 输入框元素});// 返回模板引用和方法给模板使用return {myInput,focusInput,};},
};
</script>

在这个示例中，我们创建了一个输入框和一个按钮。输入框有一个 ref 属性，其值设置为 "myInput"。在 setup 函数中，我们使用 ref 函数创建了一个名为 myInput 的响应式引用，并将其初始值设置为 null。然后，我们定义了一个 focusInput 方法，当按钮被点击时，该方法会使输入框获得焦点。

注意，模板引用在初始时是 null，因为它们在 DOM 元素或组件实例被创建和挂载到 DOM 之后才会被赋值。因此，如果你需要在组件挂载后立即访问引用，你可以使用生命周期钩子（如 onMounted）来确保引用已经被正确赋值。

当模板渲染时，Vue 会自动将 ref 属性的值（在这个例子中是 "myInput"）与我们在 setup 函数中创建的 myInput 引用关联起来。这样，我们就可以在组件的 JavaScript 代码中通过 myInput.value 来访问和操作输入框 DOM 元素了。

模板引用主要用于直接操作 DOM 或访问子组件实例，而不是用于创建响应式数据。对于需要在组件之间共享或响应变化的数据，应该使用 Vue 的响应式系统（如 ref 或 reactive）来创建和管理。