Vue3 如何获取 this

在Vue 3的开发中，获取this的方式与Vue 2有所不同，这是由于Vue 3采用了Composition API，带来了更灵活的组件逻辑组织方式，但也使得this的获取有了一些新的特点。

在Vue 2中，我们习惯在组件实例中通过this来访问组件的数据、方法和属性等。例如，在methods中可以通过this来获取data中的数据。但在Vue 3的Composition API中，this的指向不再像Vue 2那样直观。

在Vue 3的setup函数中，默认情况下是不能直接使用this来访问组件实例的。因为setup函数是在组件实例创建之前执行的，此时this还没有被创建。

如果我们想要在setup函数中获取组件实例，Vue 3提供了getCurrentInstance方法。可以通过以下步骤来获取：

需要从vue中导入getCurrentInstance：

import { getCurrentInstance } from 'vue';

然后，在setup函数中调用getCurrentInstance：

setup() {
  const instance = getCurrentInstance();
  console.log(instance);
}

需要注意的是，getCurrentInstance只能在setup函数或生命周期钩子函数中使用。它返回的是一个包含组件实例相关信息的对象，但这个对象并不是组件实例本身。如果需要访问组件实例的属性和方法，可以通过instance.proxy来获取。

例如，要访问组件的data数据，可以这样做：

setup() {
  const instance = getCurrentInstance();
  const data = instance.proxy.$data;
  console.log(data);
}

除了在setup函数中，在其他的Composition API函数中，也可以按照类似的方式来获取组件实例。

在Vue 3中获取this（组件实例）需要借助getCurrentInstance方法，并且要注意使用的场景和正确的访问方式，这样才能在开发中顺利地操作组件的各种属性和方法，实现复杂的业务逻辑。掌握了这些，就能更好地适应Vue 3的开发模式，开发出高效、灵活的应用程序。