2025年vue2生命周期执行顺序（vue2的生命周期函数）

科技前沿 • 2025-05-23 08:13 • 阅读 39

大家好，我是讯享网，很高兴认识大家。

 <svg xmlns="http://www.w3.org/2000/svg" style="display: none"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0)"></path> </svg> <p></p>

讯享网

Vue3 生命周期

beforeCreate：创建之前（、和都还是,不可用的）
created：创建完毕（能读取到数据的值,但是还没生成）
beforeMount：挂载之前（生成,但此时还没有挂载中的数据）
mounted：挂载完毕（已经成功挂载渲染的值）
beforeUpdate：更新之前
updated：更新完毕
beforeDestroy：销毁之前
destroyed：销毁完毕（实例与视图的关系解绑，再修改的值，视图再也不会更新了）
activated：组件激活时调用
deactivated：组件停用时调用

注：

和是比较特殊的两个钩子，需要配合使用
当引入的时候，页面第一次进入，钩子的触发顺序 => => ，退出时触发。当再次进入（前进或者后退）时，只触发。

在这里插入图片描述
讯享网

举例代码：

讯享网

：Vue 实例的挂载元素$el 和数据对象data 并未初始化

:完成了 data 数据的初始化，$el没有
：完成了 $el 和 data 初始化，但还是挂载在虚拟的 DOM 节点上
：Vue 实例挂载到实际的 DOM 上
.
另外在标红处，我们能发现 $el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，。

这里写图片描述

这里我们在 chrome console里执行以下命令

下面就能看到data里的值被修改后，将会触发update的操作。
这里写图片描述

这里我们在console里执行下命令对 vue实例进行销毁

销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，执行了destroy操作，后续就不再受vue控制了。
这里写图片描述

比较特殊的一个钩子，需要配合使用

:动态组件初始化渲染过程中调用 keep-alive组件激活时调用。
:动态组件移出过程中调用 keep-alive组件停用时调用。

当引入的时候，页面第一次进入，钩子的触发顺序 => => ，退出时触发。当再次进入（前进或者后退）时，只触发。

keep-alive 之后页面模板第一次初始化解析变成HTML片段后，再次进入就不在重新解析而是读取内存中的数据，即，只有当数据变化时，才使用VirtualDOM进行diff更新。故，页面进入的数据获取应该在activated中也放一份。数据下载完毕手动操作DOM的部分也应该在activated中执行才会生效。

所以，应该activated中留一份数据获取的代码，或者不要created部分，直接将created中的代码转移到activated中。

: 举个栗子：可以在这加个loading事件
：在这结束loading，常做一些数据请求和耗时操作，实现函数自执行
：依赖dom做一些其他的操作，也可以发起后端请求，配合路由钩子做一些事情
：你确认删除XX吗？
：当前组件已被删除，清空相关内容

示意图：

这里写图片描述

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted

父beforeUpdate -> 子beforeUpdate -> 子updated->父updated

父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

2025年vue2生命周期执行顺序（vue2的生命周期函数）

相关推荐