Vue3 获取this

1. 介绍

在 Vue3 中，this 关键字的使用方式与 Vue2 有一些不同。由于 Vue3 使用了 Composition API，this 的指向和用法发生了变化。本文将详细解释 Vue3 中如何获取和使用 this。

2. Composition API

在 Vue2 中，data 选项中定义的属性可以通过 this 来访问，例如 this.message 可以获取组件实例中的 message 数据。然而，Vue3 引入了 Composition API，通过响应式函数和钩子函数来组织组件的逻辑。

在 Composition API 中，this 不再是指向 Vue 实例本身的指针，而是一个普通的 JavaScript 对象。这是因为 Composition API 将组件逻辑拆分为一系列的函数，而不再需要通过 this 来访问组件实例中的数据和方法。

3. 获取组件实例

尽管 Vue3 中不再需要通过 this 来访问组件实例中的数据和方法，但在某些特定情况下仍需获取组件实例。有两个常见的场景需要获取组件实例，分别是：自定义指令和自定义组件。

3.1 自定义指令

在自定义指令中，我们有时需要访问组件实例的属性或方法。在 Vue3 中，可以通过 directive 钩子函数的 binding.instance 属性来获取组件实例。下面是一个简单的示例：

app.directive('my-directive', {
  mounted(el, binding) {
    // 获取组件实例
    const vm = binding.instance;
    // 访问组件实例中的属性或方法
    console.log(vm.message);
    vm.method();
  }
});

3.2 自定义组件

在自定义组件中，可能需要在特定的生命周期钩子函数中获取组件实例。在 Vue3 中，可以通过 getCurrentInstance() 函数来获取当前组件的实例。下面是一个简单的示例：

import { getCurrentInstance } from 'vue';

export default {
  mounted() {
    // 获取当前组件实例
    const vm = getCurrentInstance();
    // 访问组件实例中的属性或方法
    console.log(vm.proxy.message);
    vm.proxy.method();
  }
}

4. 访问组件数据和方法

在 Vue3 中，通过 Composition API 可以更方便地访问组件的数据和方法，而无需使用 this 关键字。

4.1 数据访问

在组件中定义响应式数据时，可以使用 ref 或 reactive 方法。这两个方法返回的是代理对象，通过这个代理对象可以直接访问数据。以下是示例代码：

import { ref, reactive } from 'vue';

export default {
  setup() {
    // 使用 ref 定义数据
    const message = ref('Hello Vue3');

    // 使用 reactive 定义数据
    const data = reactive({
      name: 'Alice',
      age: 18
    });

    // 访问数据
    console.log(message.value);
    console.log(data.name, data.age);

    return {
      message,
      data
    };
  }
}

4.2 方法访问

在组件中定义方法时，可以直接通过函数的方式来定义。将方法放在 setup 函数中的返回对象里，即可在模板中进行调用。以下是示例代码：

import { ref } from 'vue';

export default {
  setup() {
    // 使用 ref 定义数据
    const count = ref(0);

    // 定义方法
    function increment() {
      count.value++;
    }

    // 访问数据和方法
    console.log(count.value);

    return {
      count,
      increment
    };
  }
}

4.3 计算属性和侦听器

在 Vue3 中，计算属性和侦听器可以通过 computed 和 watch 方法来定义和使用。这两个方法返回的也是代理对象，因此可以直接访问其值。以下是示例代码：

import { ref, computed, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 定义计算属性
    const doubleCount = computed(() => {
      return count.value * 2;
    });

    // 定义侦听器
    watch(count, (newCount, oldCount) => {
      console.log(`Count changed from  ${oldCount} to$ {newCount}`);
    });

    // 访问计算属性和侦听器
    console.log(doubleCount.value);

    return {
      count,
      doubleCount
    };
  }
}