解析 Vue3 的 setup

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。

参考:https://cn.vuejs.org/api/composition-api-setup.html


已发布

分类

来自

标签:

评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注