Vue3 中 this 一分钟了解

news2024/9/27 10:03:26

Vue3 中 this

在Vue3的开发过程中，this的使用方式和Vue2有着显著的不同，特别是在组合式API（Composition API）的引入后。本文将深入探讨Vue3中this的使用，解析其底层源码，并探讨这种设计背后的原因，同时分享一些面试技巧。

在这里插入图片描述

文章目录

- - Vue3 中 this
- 一、Vue3 中this如何使用
- - 1. 在选项式API中的使用
  - 2. 在组合式API中的变化
  - 3. `this`在Vue3中的限制
  - 4. 如何在组合式API中访问组件实例
- 二、 this相关底层源码解析
- - 1. 组件实例的创建过程
  - 2. `setup`函数的执行时机
  - 3. `getCurrentInstance`的实现原理
- 三、为什么这么设计？
- - 1. 支持更好的代码复用
  - 2. 提高代码的可测试性
  - 3. 迎合未来趋势
- 四、面试技巧
- - 1. 熟悉组合式API的基本概念
  - 2. 解释`this`在Vue3中的变化
  - 3. 展示代码案例

一、Vue3 中this如何使用

1. 在选项式API中的使用

在Vue2的选项式API（Options API）中，this通常指向当前组件实例。你可以通过this访问组件的data、methods、computed等属性。

export default {
  data() {
    return {
      message: 'Hello Vue3!'
    };
  },
  methods: {
    greet() {
      console.log(this.message); // 输出: Hello Vue3!
    }
  }
};

2. 在组合式API中的变化

Vue3的组合式API不再依赖this来访问组件实例。相反，它使用函数式编程的理念，通过ref、reactive等函数来创建响应式状态，并通过setup函数来组织逻辑。

import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue3!');
    const greet = () => {
      console.log(message.value); // 输出: Hello Vue3!
    };
    return {
      message,
      greet
    };
  }
};

3. `this`在Vue3中的限制

在Vue3中，由于组合式API的推广，this的使用场景被大大限制。在setup函数中，你不能使用this来访问组件实例。这是因为setup函数在组件实例化之前就被调用了，此时this还未被绑定到组件实例上。

4. 如何在组合式API中访问组件实例

虽然setup函数中不能直接使用this，但你可以通过getCurrentInstance函数来获取当前组件实例。不过，这通常不是推荐的做法，因为它破坏了组合式API的函数式编程风格。

import { getCurrentInstance } from 'vue';

export default {
  setup() {
    const instance = getCurrentInstance();
    console.log(instance); // 输出当前组件实例
  }
};