当前位置：首页 > news >正文

vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解）

news 2026/5/27 4:19:53

文章目录

一、生命周期介绍
二、生命周期钩子
三、生命周期整体流程图（重要）
本人其他相关文章链接

一、生命周期介绍

注意点1：生命周期钩子函数中this指代vue对象，注意和监视属性下面图1中的this做对比，别混。
（即：
计算属性使用同步操作的普通函数，this => vue，
同步操作的箭头函数，this => window
监视属性的同步操作的普通函数，this => vue，
同步操作的箭头函数，this => window，
异步操作的普通函数，this => window，
异步操作的箭头函数，this => vue，具体原因看下面图）。

二、生命周期钩子

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，给予用户机会在一些特定的场景下添加他们自己的代码。
比如 created 钩子可以用来在一个实例被创建之后执行代码;
常用的生命周期钩子函数有:

created: 实例创建完成后被立即调用
mounted: 实例挂载完成后被立即调用
beforeUpdate: 实例需要渲染之前调用
updated: 实例更新后调用
destroyed: Vue 实例销毁后调用

三、生命周期整体流程图（重要）

注意点1：

问题：钩子函数beforeCreate和created代表创建前和创建后，这个创建指的是谁？

答案：指的是“数据监测和数据代理”也就是data属性和属性的get()和set()，一定不是指代vue实例，千万别弄混。

注意点2：图中的判断元素“Has template option?”中的template 指的是图1元素(也就是data中的template属性)，而不是图2元素（图2中的template 是标签）

图1

图2

问题：在使用 Vue 2/3 的 .vue 单文件开发模式（而非 HTML 模板）时，图1 中的手动 template 写法虽不存在，为何生命周期流程仍会必然命中？

答案：.vue 文件中的标签 → 编译成 template 选项 → 挂在 Vue 组件对象（VC）上 → 生命周期流程图中判断的就是这个解析后的 template 选项。

注意点3：图3中的outerHtml指的是图4中绿色框内容，与其对立的interHtml指的才是红色框内容

图3

图4

注意点4：

问题：图5步骤会把之前生成内存中的虚拟DOM转成真实DOM，转成之后会往“vm.$el”上存了一份，问：为什么要保存一份？

答案：可以用在很多地方，比如vue提供了虚拟DOM和真实DOM比较算法，既然有比较那么去哪里拿虚拟DOM呢？诶，“vm.$el”上面就保存了可以直接使用。

图5

注意点5：

问题：图6中红框如何理解？，为啥最终都不奏效，注意这个“最终”字眼

原因：钩子函数beforeMount中无论做了什么操作都没用，因为执行到图7红框操作部分，只会把内存中虚拟DOM转为真实DOM插入页面中，会进行模板渲染覆盖，这样就会导致钩子函数beforeMount中无论做了什么操作都没用了。

图6

图7

注意点6：在div中定义模板和在data中定义模板，页面长得不一样。
举例说明：div中定义模板如图8，页面效果如图9，页面会发现root容器还在，而如果data中定义模板如图10，页面效果如图11，页面会发现root容器消失了。总结大白话就是说，如图12使用data中定义模板方式，会造成绿色框会替换掉红色框内容，就会造成原来红色框定义的x属性等等都消失了，都白写了。

图8

图9

图10

图11

图12

注意点7：面试官可能会问，在哪个钩子中页面和数据尚未保持同步啊？所谓数据未同步指的是data数据值已经改了，而页面却没进行动态更新。如图13
答案就是beforeUpdate钩子函数中

图13

注意点8：官网红框容易造成歧义

注意点9：一般不会在钩子函数beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了。大白话说就是哪怕钩子函数beforeDestroy中执行修改属性操作了，值也改变了，但是页面也不会触发更新操作了，即值改了但页面不更新了。

注意点10：vue生命周期流程图中只展示了8个钩子，实际还有3个隐藏的钩子没显现出来，它们旨在特殊场合才会显示出来，即“实现路由切换”功能时才会讲诉这3个隐藏的钩子。

注意点11：
3个隐藏的钩子：nextTick、activated、deactivated
其中：nextTick请看3.24知识点，而activated、deactivated用于路由组件。

举例：代码说明

<div id="root">{{name}}</div><script>varvm=newVue({el:'#root',data:{name:'Tim'},created:function(){console.log('实例创建...');},mounted:function(){console.log('实例挂载...');},beforeUpdate:function(){console.log('实例将要更新...');},updated:function(){console.log('实例已更新...');},destroyed:function(){console.log('实例卸载...');}});//改变namevm.name='Cat';//vm.$destroy();//卸载</script>