vue-3 this概念

一、this概念

官方是这样说的：

在 setup()内部，this 不会是该活跃实例的引用

因为 setup() 是在解析其它组件选项之前被调用的，所以 setup() 内部的 this 的行为与其它选项中的 this 完全不同

这在和其它选项式 API 一起使用 setup() 时可能会导致混淆

啥意思呢：

就是 this 未指向当前的组件实例，在 setup 被调用之前，data，methods,computed 等都没有被解析

但事实是组件实例确实在执行 setup 函数之前就已经被创建好了，所以会与 Vue2 this 导致混淆

二、使用getCurrentInstance

getCurrentInstance 支持访问内部组件实例：

getCurrentInstance 只暴露给高阶使用场景

典型的比如在库中，强烈反对在应用的代码中使用 getCurrentInstance

请不要把它当作在组合式 API 中获取 this 的替代方案来使用

 

import { getCurrentInstance } from 'vue'
 
const MyComponent = {
  setup() {
    // 获取当前组件的上下文，下面两种方式都能获取到组件的上下文。
    const { ctx }  = getCurrentInstance(); // 方式一，这种方式只能在开发环境下使用，生产环境下//的ctx将访问不到
    const { proxy }  = getCurrentInstance(); // 方式二，此方法在开发环境以及生产环境下都能放到组件上下文对象（推荐）
  }
}

 

 

引用：

https://dhexx.cn/news/show-241335.html

https://blog.csdn.net/weixin_45974259/article/details/123858407