vue3 script 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的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 语法糖用了才知道有多爽 (四)