Vue3 中获取 this

Vue3 中获取 this

在 Vue3 中，通过 setup() 函数来定义组件的数据、方法和计算属性，这样我们可以更加灵活地控制组件的逻辑，而在 setup() 函数中获取 this 的方式也有所改变。

setup() 函数简介

在 Vue3 中，我们需要使用 setup() 函数来设置组件的数据和方法，而不再使用以前的 data、methods 等属性。setup() 函数接收两个参数：props 和 context。其中，props 是父组件传递给子组件的数据，而 context 则包含了一些实用的属性和方法，其中就包括了 this。

获取 this

在 setup() 函数中，如果我们想要获取这个组件实例（即 this）时，我们可以通过 context.attrs 来获取。下面是一个示例代码：

import { ref, reactive, toRefs } from 'vue';

export default {
  setup() {
    const data = reactive({
      message: 'Hello, World!'
    });

    const showMessage = () => {
      console.log(context.attrs.__v_descriptions);
    };

    return {
      ...toRefs(data),
      showMessage
    };
  }
};

在上面的示例代码中，我们定义了一个 message 变量和一个 showMessage 函数，在 showMessage 函数中通过 context.attrs 来获取 this，然后打印出组件的描述信息。

运行结果

当我们调用 showMessage 函数时，会输出组件的描述信息，示例代码运行结果如下：

> Hello, World!

注意事项

需要注意的是，在 Vue3 中，setup() 函数中获取 this 的方式是通过 context.attrs，但是这并不是官方推荐的做法，因为这样会导致代码在未来版本的 Vue 中不可用。为了更好地兼容未来版本的 Vue，建议尽量避免在 setup() 函数中直接获取 this。

除了通过 context.attrs 来获取 this 外，我们也可以通过 provide/inject、customRef 等方式来实现相同的功能。

总的来说，在 Vue3 中要获取 this，建议尽量遵循官方推荐的做法，避免直接获取 context.attrs，以提高代码的可维护性和兼容性。