Vue3.0 生命周期

2023-02-12,

所有生命周期钩子的this上下文都是绑定至实例的。

beforeCreate:在实例初始化之后、进行数据帧听和事件/侦听器的配置之前同步调用。
created:实例创建完成,主要包括数据帧听、计算属性、方法、事件/侦听器,(注意:由于挂在阶段还未开始,因此$el还不可用)。
beforeMount:挂在之前调用,render函数首次调用。
mounted:实例挂在完成后调用,(注意,mounted不会保证所有子组件都已挂载完成,可以使用$nextTick())。
beforeUpdate:数据发生改变之后,DOM被更新之前调用。
updated:在数据更改导致的虚拟DOM重新渲染和更新完毕之后调用(注意,updated不会保证所有子组件都已挂载完成,可以使用$nextTick())。
activated:被keep-alive缓存的组件激活时 调用。
deactivated:被keep-alive缓存的组件失活时调用。
beforeUnmount:在组件实例卸载之前调用。
unmounted:组件实例卸载之后调用(注意,实例所有指令都被解绑,所有侦听器都被移除,所有子组件实例都被卸载)。
errorCaptured:在捕获一个来自后代组件的错误时被调用(可以返回false可以阻止该错误继续向上传播。)。
renderTracked:跟踪虚拟DOM重新渲染时调用,可用来查看哪个操作跟踪了组件及该操作的目标对象和键。
renderTriggered:当虚拟DOM重新渲染被触发时调用,用来监听什么操作触发了重新渲染以及该操作的目标对象和键。

其实一般情况下用的最多的就是组件创建期间的一些声明周期钩子,比如:created、mounted、beforeUnmount(Vue 2.x版本中是beforeDestroy)等,其他的主要就是稍微了解一下,用的时候再看(手动哭笑)。

补充点:setup作为组合式API入口点,其调用时间是在创建组件实例时,在初始 prop 解析之后立即调用。在生命周期方面,它是在beforeCreate钩子之前调用的。

选项式API的生命周期选项与组合式API之间的映射

beforeCreate -> 使用 setup()
created -> 使用 setup()
beforeMount -> onBeforeMount
mounted -> onMounted ;
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
activated -> onActivated
deactivated -> onDeactivated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted
errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
renderTriggered -> onRenderTriggered

Vue3.0 生命周期的相关教程结束。

《Vue3.0 生命周期.doc》

下载本文的Word格式文档,以方便收藏与打印。