# Vue 2.x 生命周期
See More

各生命周期钩子函数:
beforeCreate()(创建前),在实例初始化之后,数据观察 (data observer)和event/watcher事件配置之前被调用。created()(创建后),在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观察 (data observer),属性和方法的运算,watch/event事件回调。这时,挂载阶段还没开始,$el属性目前尚不可用。beforeMount()(载入前),在挂载开始之前被调用,相关的render函数首次被调用,该钩子函数在服务器渲染期间不被调用。mounted()(载入后),实例被挂载后调用,这时$el被新创建的vm.$el替换了。 如果根实例挂载到了一个文档内的元素上,当mounted()被调用时vm.$el也在文档内。beforeUpdate()(更新前),是在 DOM 树生成之前、虚拟 DOM 树生成之后调用,调用条件是这个vm实例已经mounted()过。该钩子函数在服务器渲染期间不被调用。updated()(更新后),由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。beforeDestroy()(销毁前),实例销毁之前调用。在这一步,实例仍然完全可用。destroyed()(销毁后),实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。
# Vue 3.0 生命周期
beforeCreate() 和 created() 均被 setup() 替代了;
被重命名的钩子函数:
beforeMount()->onBeforeMount()mounted()->onMounted()beforeUpdate()->onBeforeUpdate()updated()->onUpdated()beforeDestroy()->onBeforeUnmount()destroyed()->onUnmounted()
新增两个debug钩子函数:(这两个函数都会接收一个 DebuggerEvent 作为参数)
onRenderTracked()onRenderTriggered()
因为 Vue3.0 是兼容 Vue2.x 的语法的,所以为了保证 Vue2.x 的语法能够在 Vue3.x 中使用运行,大部分 Vue2.x 的回调函数还是被保留的。但beforeDestroy()和destroyed()函数被停用了。
如果在 Vue 3.0 中混合使用 Vue 2.x 的回调函数时,Vue 3.x 的生命周期会优先于 Vue2.x 的执行。
当前Vue 3.0 中,生命周期函数的调用顺序为:
1.setup
2. onRenderTracked
3. onBeforeMount
4. onMounted
5. mounted
6. onRenderTriggered
7. onRenderTracked
8. onBeforeUpdate
9. onUpdated
10. onBeforeUnmount
11. onUnmounted
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11