我们在 Vue 3 中使用 setup 函数写组件，如何获取类似于 Vue 2 中的 this？

Vue.js 是一个非常流行的前端框架，在 Web 前端开发中有着广泛的应用。在 Vue 2 中，我们通常使用 this 来引用当前组件实例（Component Instance），并通过它来访问组件的属性、方法和生命周期钩子等。而在 Vue 3 中，由于采用了新的 Composition API，this 的作用被一定程度上取代了。那么，如果我们在 Vue 3 中使用 setup 函数写组件，如何获取类似于 Vue 2 中的 this？本文将给大家详细介绍这个问题，并提供一些解决方案。

Vue 3 中的 Composition API

Vue 3 中引入了新的 Composition API，即“组合式 API”。这套 API 相较于 Vue 2 中的 Options API 更加灵活和可扩展，能够更好地解决代码复用和逻辑复杂性的问题。Composition API 的核心是 setup 函数，该函数在组件实例创建之前被调用，用于设置组件的状态和逻辑。

要使用 Composition API，我们首先需要在组件中导入 vue 模块并引用其中的 createApp 和 defineComponent 函数。然后，我们可以在组件中使用 setup 函数来实现相关的状态管理和逻辑实现。例如：

import { createApp, defineComponent } from 'vue' const MyComponent = defineComponent({ setup() { // 这里编写相关的状态和逻辑 } }) createApp({}).mount('#app')

在上面的代码中，我们首先导入了 vue 模块，并使用其中的 createApp 和 defineComponent 函数来创建组件实例。然后，我们在组件中使用 setup 函数来设置组件的状态和逻辑。最后，我们通过 createApp 函数和 mount 方法来挂载组件。

setup 函数与 this 的区别

在 Vue 3 中，setup 函数被用来替代 Vue 2 中的 Options API。相较于 Options API，setup 函数具有以下优点：

• 更好的代码复用性：可以将多个组件逻辑划分为更小的逻辑单元，实现逻辑复用。
• 更好的类型推断支持：可以通过 TypeScript 完成更准确、更完整的类型检查。
• 更好的代码分离性：可以将组件声明和逻辑实现分离，更好地遵循单一职责原则。

同时，由于 Composition API 是一套全新的 API，它与 Vue 2 中的 Options API 有着许多不同之处。其中一个显著的区别就是 this 的用法。在 Vue 2 中，我们可以使用 this 来引用当前组件实例，从而访问其属性、方法和生命周期钩子等。而在 Vue 3 的 setup 函数中，this 的作用被取代了。这是因为 setup 函数在组件实例创建之前被调用，此时还没有创建组件实例，因此无法使用 this 来引用组件的属性和方法。

如何获取类似于 this 的对象

既然在 Vue 3 的 setup 函数中无法使用 this，那么我们应该如何获取类似于 this 的对象呢？Vue 3 提供了两种方案来解决这个问题。

1. Context 对象

Vue 3 中，setup 函数的第一个参数是 context 对象，该对象包含了当前组件的所有属性和方法。我们可以通过它来访问组件的 props、attrs、emit 和 slots 等属性，也可以通过它来访问组件的生命周期钩子。

下面是一个示例代码：

import { createApp, defineComponent } from 'vue' const MyComponent = defineComponent({ props: { msg: String }, setup(props) { console.log(props.msg) // 输出 'Hello, Vue 3!' return {} } }) createApp({ template: `<MyComponent msg="Hello, Vue 3!"/>`, components: { MyComponent } }).mount('#app')

在上面的代码中，我们声明了一个 MyComponent 组件，它有一个名为 msg 的 props。在 setup 函数中，我们通过 context 对象中的 props 属性来访问 msg 属性，并将其输出到控制台。最后，我们通过 createApp 和 mount 方法挂载组件，并将 msg 属性传递给组件。

需要注意的是，context 对象不仅包含组件的 props、attrs、emit 和 slots 等属性，还包含了一些其他的属性和方法，例如：

• context.attrs：用于访问非 props 的父组件属性。
• context.emit：用于触发自定义事件并传递参数。
• context.slots：用于访问具名插槽中的内容。
• context.root：用于访问根组件实例。

2. Refs 引用

除了 context 对象外，Vue 3 还引入了一个新的响应式对象类型 Refs（Refs 可以理解为给数据加了一个响应式的标识）。Refs 对象可以帮助我们获取 DOM 元素和组件实例，并对其进行引用。当 Refs 对象关联的值改变时，相关的 DOM 元素或组件实例也会相应地更新。

下面是一个示例代码：

import { createApp, defineComponent, ref } from 'vue' const MyComponent = defineComponent({ setup() { const count = ref(0) const handleClick = () => { count.value++ } return { count, handleClick } } }) createApp({ template: ` <div> <span>{{ count }}</span> <button @click="handleClick">+</button> </div> `, components: { MyComponent } }).mount('#app')

在上面的代码中，我们声明了一个 MyComponent 组件，它包含一个按钮和一个计数器。在 setup 函数中，我们通过 ref 函数创建了一个 count 变量，并将其初始值设为 0。然后，我们定义了一个 handleClick 函数，在点击按钮时将 count 变量自增。最后，我们将 count 和 handleClick 函数添加到组件的返回对象中，并在模板中引用它们。

需要注意的是，Refs 对象的 value 属性才是真正的数据对象，而不是 Refs 对象本身。因此，在访问 Refs 对象关联的值时，需要使用 value 属性来获取其真实的值。

总结

Vue 3 中的 Composition API 是一套全新的 API，能够更好地解决代码复用和逻辑复杂性的问题。与 Vue 2 中的 Options API 相比，Composition API 更加灵活、可扩展和易于维护。然而，在 Vue 3 的 setup 函数中，this 的作用被取代了，需要使用 context 对象和 Refs 引用来获取类似于 this 的对象。在实际开发中，我们应该根据具体的需求选择合适的方案，并合理利用 Vue 3 强大的功能来实现更加优雅、高效的前端开发。