# 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