文章目录

• • 8. 关于 `"this"`
  • • 小结
  • 9. setup 中的生命周期

这里是完整的目录图片,由于整篇文章篇幅太长,拆分成了几篇来展示

8. 关于 "this"

在 option api 当中,我们访问组件实例中的内容可以通过 this
但是在 vue 3 当中没有了 this 指针,官方 : 在 setup() 内部, this 不会是该活跃实例的引用,因为 setup() 是 在解析完其他组件选项之前被调用执行的,所以 setup() 内部的this的行为与其他选项中的 this 完全不同,这在和其他选项式 Api 一起使用 setup() 时可能会导致混淆
分析 : 创建组件实例 ⇒ 执行 setup 函数 ==> 解析 data,methods,computed
setup 的执行时机是在 beforeCreate 之前,此时的 this 是 undefined

Vue 3 setup() 语法

Vue3 当中提供了 getCurrentInstance(), getCurrentInstance() 代表上下文,也就是当前实例
getCurrentInstance() 当中的 ctx 属性,就相当于 vue2 当中的 this

import { getCurrentInstance, onMounted } from "vue";
export default {setup( ) {const { ctx } = getCurrentInstance(); //获取上下文实例，ctx=vue2的thisonMounted(() => {console.log(ctx, "ctx");ctx.http();});},
};

但是在这里需要注意 ! ! ! !的是 ctx 代替 this 仅仅适用于开发阶段,如果将项目打包放到生产服务器上,就会报错 ! ! ! , ctx 是无法获取路由和全局挂载对象的
解决方案 : 使用 proxy 来代替 ctx

import { getCurrentInstance } from 'vue'
export default ({name: '',setup(){const { proxy } = getCurrentInstance() // 使用proxy代替ctx，因为ctx只在开发环境有效onMounted(() => {console.log(proxy, "proxy");proxy.http();});}
})

小结

// 组合 API