Vue3.0 生命周期

2024-09-08 15:20:45

所有生命周期钩子的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

最新文章

热门文章