by 李奕锦 from https://qd-dajin.com/2024/05/10/vue-setup/ 李奕锦博客
一、 为什么使用 Vue3 的 setup 函数
随着 Vue3 的发布，我们迎来了许多激动人心的新特性， 其中 setup 函数便是其中之一。 setup 函数是 Vue3 中 Composition API 的核心组成部分，它为我们提供了一种更加灵活、组织化的方式来编写 Vue 组件的罗辑。 那么，为什么要使用 Vue3 的 setup 函数呢？
1、 代码组织与复用
在 Vue2 中，组件的逻辑通常分散在 data、methods、computed等选项中，这导致代码的组织不够灵活，且难以服用。 而 Vue3 的 setup 函数则允许我们将组件的逻辑集中到一个函数中， 使得代码的组织更加清晰，同时也更容易实现逻辑的复用。
2、 响应式数据声明
在 setup 函数中，我们可以使用 ref 和 reactive 等函数来创建响应式数据，这使得数据的声明和更新变得更加直观和灵活。
3、 逻辑组合与复用
通过 setup 函数，我们可以将多个逻辑组合成一个自定义的 hook，然后在多个组件中复用这些 hook，从而提高开发效率。
二、setup 函数是什么
setup 函数是 Vue3 Composition API 中的一个核心函数，它是组件选项 api 之外的一种新的组织逻辑的方式。在 setup 函数中，我们可以使用 Composition API 提供的各种函数来编写组件的逻辑，包括响应式数据的声明、计算属性的创建、生命周期钩子的使用等。
setup 函数接受两个参数：props 和 context。
props 是组件的属性对象，我们可以通过它来获取父组件传递给子组件的属性值。
context是一个上下文对象，它包含了组件实例上的一些属性和方法，比如：attrs、slots、emit 等。
值得注意的是，setup 函数在组件的生命周期中只执行一次，并且它是在组件的 beforeCreate 和 created 生命周期钩子之间执行的。 这意味着在 setup 函数中，我们不能访问到 this 关键字，因为此时组件实例还没有被创建。
在 Vue3 中，setup 函数中的 this 指向的是 undefined，因为 setup 函数是在组件实例化之前执行的，此时还没有 this 对象。 因此，在 setup 函数中不能使用 this 关键字。 如果想要在 setup 函数中访问组件实例的属性或方法，可以使用 Vue3 提供的两个新的函数：getCurrentInstance和ctx。
发表回复