这里是完整的目录图片,由于整篇文章篇幅太长,拆分成了几篇来展示
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的this
onMounted(() => {
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();
});
}
})
<script setup> 语法糖的写法
<script lang="ts" setup>
import {
getCurrentInstance } from 'vue';
const {
proxy} = getCurrentInstance()
</script>
小结
getCurrentInstance 只能在 setup 或者声明周期钩子当中调用
如果要在 setup 或者声明周期钩子之外使用的话,需要先在 setup 中调用 getCurrentInstance() 获取该实例之后再使用
但是从代码规范来说 : getCurrentInstace 只暴露给高阶使用场景 (如 : 库中) 官方规范强烈反对在应用的代码中使用 getCurrentInstance() , 官方文档中提示 : 请不要将 getCurrentInstance() 当中在组合式 API 的替代方案来使用
9. setup 中的生命周期
Vue 3 当中通过在生命周期钩子前面加上 " on"来访问组件的生命周期钩子
| Option API | setup 中 | 执行时间 |
|---|---|---|
| beforeCreate | 使用 setup() | |
| created | 使用 setup() | |
| beforeMount | onBeforeMount | 在组件 DOM 实际渲染挂载之前调用。在这一步中，根元素还不存在。 |
| mounted | onMounted | 在组件的第一次渲染后调用，该元素现在可用，允许直接DOM访问 |
| beforeUpdate | onBeforeUpdate | 数据更新时调用，发生在虚拟 DOM 打补丁之前。 |
| updated | onUpdated | DOM更新后，updated 的方法立即会调用。 |
| beforeUnmount | onBeforeUnmount | 在卸载组件实例之前调用。在这个阶段，实例仍然是完全正常的。 |
| unmounted | onUnmounted | 卸载组件实例后调用。调用此钩子时，组件实例的所有指令都被解除绑定，所有事件侦听器都被移除，所有子组件实例被卸载。 |
| errorCaptured | onErrorCaptured | 调试时使用。 |
| renderTracked | onRenderTracked | 调试时使用。 |
| renderTriggered | onRenderTriggered | 调试时使用。 |
| activated | onActivated | 被keep-alive 缓存的组件激活时调用。 |
| deactivated | onDeactivated | 被 keep-alive 缓存的组件停用时调用。 |
Vue 3 setup() 语法
// 组合 API
<script>
import {
onBeforeMount, onMounted } from 'vue';
export default {
setup () {
onBeforeMount(() => {
console.log('onBeforeMount生命周期')
})
onMounted(() => {
console.log('onMounted生命周期')
})
}
}
</script>
<script setup> 语法糖的写法
<script setup>
import {
onBeforeMount, onMounted } from 'vue';
onBeforeMount(() => {
console.log('onBeforeMount生命周期')
})
onMounted(() => {
console.log('onMounted生命周期')
})
</script>
vue3 script setup 语法糖用了才知道有多爽 (一)
vue3 script setup 语法糖用了才知道有多爽 (二)
vue3 script setup 语法糖用了才知道有多爽 (三)
vue3 script setup 语法糖用了才知道有多爽 (四)