---

前言

vue3 setup 学习

---

一、vue3的setup

Vue 3 的 setup 函数是 Composition API 的核心，它提供了一种新的方式来使用 Vue 的响应式系统和生命周期钩子。setup 函数是 Composition API 的入口点，它允许开发者以声明式的方式定义组件的状态和逻辑，而不是使用 Vue 2 中的 data、computed、watch 和 methods 等选项式 API。

以下是 setup 函数的一些关键特性和用法：

响应式状态

• ref：用于创建响应式的基本类型（如 number、string、boolean 等）。
• reactive：用于创建响应式的复杂类型（如 Object 或 Array）。
• computed：用于创建一个计算属性，只有当依赖发生变化时才会重新计算。
• watch：用于观察响应式状态的变化，当状态变化时执行回调函数。

生命周期钩子

• onMounted：组件挂载完成后执行。
• onUpdated：组件更新完成后执行。
• onUnmounted：组件卸载后执行。

示例

import { ref, reactive, computed, watch, onMounted, onUnmounted } from 'vue';export default {setup() {// 使用 ref 创建响应式的基本类型const count = ref(0);// 使用 reactive 创建响应式的复杂类型const state = reactive({firstName: 'John',lastName: 'Doe'});// 使用 computed 创建计算属性const fullName = computed(() => `${state.firstName} ${state.lastName}`);// 使用 watch 观察响应式状态的变化watch(count, (newValue, oldValue) => {console.log(`count changed from ${oldValue} to ${newValue}`);});// 使用生命周期钩子onMounted(() => {console.log('Component is mounted!');});onUnmounted(() => {console.log('Component is unmounted!');});// 返回到模板中使用的值return {count,state,fullName};}
};

在这个示例中，我们使用了 ref、reactive、computed 和 watch 来创建和管理响应式状态，以及使用 onMounted 和 onUnmounted 来处理组件的生命周期。

注意事项

• setup 函数是 Composition API 的入口点，它在组件实例化之前执行。
• setup 函数的参数包括 props 和 context，其中 props 是组件的属性，context 是一个暴露了其他组件上下文的只读对象。
• 在 setup 函数中，this 不再指向当前组件的实例，而是未定义的。

setup 函数为 Vue 3 的组件提供了一种更灵活、更模块化的方式来管理状态和逻辑，使得代码更加清晰和易于维护。

二、与vue2 的data 共存

在 Vue 3 中，setup 函数是 Composition API 的入口点，它用于定义响应式状态和逻辑。虽然 setup 和 data 可以共存于同一个组件中，但它们之间存在一些使用上的差异和限制。

setup 与 data 的区别

1. data：这是 Vue 2 中引入的选项式 API 的一部分，用于定义组件的响应式数据。在 Vue 3 中，data 仍然可以被使用，但它的作用域和使用方式与 Composition API 有所不同。

2. setup：这是 Composition API 的核心，提供了更灵活的方式来创建和管理响应式状态。在 setup 内部，你可以使用 ref、reactive、computed 等函数来定义状态。

setup 与 data 的共存

• 访问 data 中的属性：在 setup 函数中，你可以通过解构 props 参数来访问 data 中定义的属性。这是因为在 Composition API 中，data 中的属性被暴露为 props。

  setup(props) {// 假设在 data 中定义了一个名为 `counter` 的属性console.log(props.counter);
  }
  

• 在模板中使用：无论是 data 中的属性还是 setup 中定义的状态，都可以在模板中直接使用。

注意事项

• 组件实例的引用：在 setup 函数中，this 关键字不再指向当前组件的实例。因此，你不能直接使用 this 来访问 data 或 methods 中的属性。

• 返回对象：在 setup 函数中定义的状态和逻辑，需要通过返回一个对象的方式暴露给组件的其他部分（如模板或 methods）。这样，这些状态和逻辑就可以作为组件的公共状态和方法被访问。

示例

import { ref } from 'vue';export default {data() {return {count: 0};},setup() {const count = ref(0); // Composition API 中的响应式状态// 返回 count 供模板和其他组件选项使用return {count};},methods: {increment() {// 由于不能直接使用 this 访问 setup 中的响应式状态，// 你需要在 methods 中使用 setup 返回的状态。this.count++; // 访问 data 中的 countthis.setupState.count++; // 访问 setup 返回的 count}}
};

在这个示例中，count 在 data 中和 setup 中都被定义了。然而，由于 setup 中的 count 是通过 Composition API 创建的响应式状态，你不能直接在 methods 中使用 this.count 来访问它。相反，你需要使用 setup 返回的状态，这通常通过给组件实例添加一个额外的属性来实现，例如 setupState。

请注意，setupState 是一个示例属性名，实际的属性名取决于你的具体实现。这种方式允许你在 methods 中访问 setup 中定义的状态，同时保持了 Composition API 的响应式特性。

---