Vue3.0 生命周期

Vue3.0 生命周期

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