Vue3 中如何使用 this

在 Vue2 开发中，this 的使用非常普遍，它能轻松访问组件的 data、methods 等属性。然而，Vue3 的响应式原理和组件架构发生了较大变化，this 的使用方式也有所不同。

在 Vue3 中，如果使用 Options API 来构建组件，this 的使用和 Vue2 较为相似。在组件的 data、methods、computed 等选项中，this 指向当前组件实例。例如：

<template>
  <div>{{ message }}</div>
</template>

<script setup>
export default {
  data() {
    return {
      message: 'Hello Vue3'
    }
  },
  methods: {
    greet() {
      console.log(this.message)
    }
  }
}
</script>

在上述代码中，this.message 可以访问到 data 中定义的 message 属性，this 在 methods 里正常使用。

但在 Vue3 大力推崇的 Composition API 里，情况就不一样了。在 <script setup> 语法糖中，没有了传统意义上的 this。这是因为 <script setup> 是直接在模块作用域中执行的，并不存在一个像 Vue2 那样明确的组件实例 this 指向。

如果想在 Composition API 中获取类似 this 的功能，可以借助 getCurrentInstance 函数。不过需要注意，getCurrentInstance 仅在开发模式下可用，并且尽量少用，因为它破坏了组件的封装性和可测试性。示例代码如下：

<template>
  <div>{{ message }}</div>
</template>

<script setup>
import { getCurrentInstance } from 'vue';

const instance = getCurrentInstance();
const message = instance.proxy.message;

const greet = () => {
  console.log(instance.proxy.message);
}
</script>

通过 getCurrentInstance 获取当前组件实例，进而通过 proxy 属性访问到组件的属性和方法。

在 Vue3 中使用 this，要区分 Options API 和 Composition API 的不同场景。Options API 中 this 的使用保持了一定的连贯性，而在 Composition API 中，虽然没有传统的 this，但借助一些方法也能实现相似功能。开发者需要根据项目需求和开发习惯，合理选择使用方式，充分发挥 Vue3 的优势。