文章目录一、生命周期介绍二、生命周期钩子三、生命周期整体流程图重要本人其他相关文章链接一、生命周期介绍注意点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中执行修改属性操作了值也改变了但是页面也不会触发更新操作了即值改了 但页面不更新了。注意点10vue生命周期流程图中只展示了8个钩子实际还有3个隐藏的钩子没显现出来它们旨在特殊场合才会显示出来即“实现路由切换”功能时才会讲诉这3个隐藏的钩子。注意点113个隐藏的钩子nextTick、activated、deactivated其中nextTick请看3.24知识点而activated、deactivated用于路由组件。举例代码说明div idroot{{name}}/divscriptvarvmnewVue({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.nameCat;//vm.$destroy();//卸载/script结果展示本人其他相关文章链接1.《基础篇第1章vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结2.《基础篇第2章vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结3.《进阶篇第3章vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点4.《基础篇第4章》使用vue脚手架创建项目5.vue2知识点数据代理6.vue2知识点事件处理7.vue2知识点列表渲染包含v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测8.vue2知识点计算属性与监听属性9.vue2知识点生命周期包含生命周期介绍、生命周期钩子、整体流程图详解10.vue2知识点非单文件组件和单文件组件11.vue2知识点组件is属性12.vue2知识点组件模板定义13.vue2知识点组件的props属性、非props属性、props属性校验14.vue2知识点组件自定义事件15.vue2知识点组件插槽分发16.vue2知识点动态组件17.vue2知识点混入18.vue2知识点浏览器本地缓存19.vue2知识点全局事件总线GlobalEventBus20.vue2知识点消息订阅与发布21.vue2知识点nextTick语法22.vue2知识点Vue封装的过度与动画23.vue2知识点路由24.vue2知识点vm调用待$命令介绍25.vue组件通信案例练习包含父子组件通信及平行组件通信26.vue表单案例练习vue表单创建一行数据及删除数据的实现与理解27.vue2基础组件通信案例练习待办事项Todo-list案例练习28.vue2基础组件通信案例练习把案例Todo-list改写成本地缓存29.vue2基础组件通信案例练习把案例Todo-list改成使用自定义事件30.vue2基础组件通信案例练习把案例Todo-list改成使用全局事件总线31.vue2基础组件通信案例练习把案例Todo-list改成使用消息订阅与发布32.vue2基础组件通信案例练习把案例Todo-list新增编辑按钮33.vue2基础组件通信案例练习把案例Todo-list改成使用动画与过度34.学习vue2遇到过的问题及个人总结
vue2知识点：生命周期（包含：生命周期介绍、生命周期钩子、整体流程图详解）
发布时间：2026/5/27 4:19:04
文章目录一、生命周期介绍二、生命周期钩子三、生命周期整体流程图重要本人其他相关文章链接一、生命周期介绍注意点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中执行修改属性操作了值也改变了但是页面也不会触发更新操作了即值改了 但页面不更新了。注意点10vue生命周期流程图中只展示了8个钩子实际还有3个隐藏的钩子没显现出来它们旨在特殊场合才会显示出来即“实现路由切换”功能时才会讲诉这3个隐藏的钩子。注意点113个隐藏的钩子nextTick、activated、deactivated其中nextTick请看3.24知识点而activated、deactivated用于路由组件。举例代码说明div idroot{{name}}/divscriptvarvmnewVue({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.nameCat;//vm.$destroy();//卸载/script结果展示本人其他相关文章链接1.《基础篇第1章vue2简介》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结2.《基础篇第2章vue2基础》包含Vue2知识点、个人总结的使用注意点及碰到的问题总结3.《进阶篇第3章vue进阶-组件》包含组件、自定义事件、插槽、路由等等扩展知识点4.《基础篇第4章》使用vue脚手架创建项目5.vue2知识点数据代理6.vue2知识点事件处理7.vue2知识点列表渲染包含v-for、key、取值范围、列表过滤、列表排序、vue监视对象或数组的数据改变原理、总结vue数据监测8.vue2知识点计算属性与监听属性9.vue2知识点生命周期包含生命周期介绍、生命周期钩子、整体流程图详解10.vue2知识点非单文件组件和单文件组件11.vue2知识点组件is属性12.vue2知识点组件模板定义13.vue2知识点组件的props属性、非props属性、props属性校验14.vue2知识点组件自定义事件15.vue2知识点组件插槽分发16.vue2知识点动态组件17.vue2知识点混入18.vue2知识点浏览器本地缓存19.vue2知识点全局事件总线GlobalEventBus20.vue2知识点消息订阅与发布21.vue2知识点nextTick语法22.vue2知识点Vue封装的过度与动画23.vue2知识点路由24.vue2知识点vm调用待$命令介绍25.vue组件通信案例练习包含父子组件通信及平行组件通信26.vue表单案例练习vue表单创建一行数据及删除数据的实现与理解27.vue2基础组件通信案例练习待办事项Todo-list案例练习28.vue2基础组件通信案例练习把案例Todo-list改写成本地缓存29.vue2基础组件通信案例练习把案例Todo-list改成使用自定义事件30.vue2基础组件通信案例练习把案例Todo-list改成使用全局事件总线31.vue2基础组件通信案例练习把案例Todo-list改成使用消息订阅与发布32.vue2基础组件通信案例练习把案例Todo-list新增编辑按钮33.vue2基础组件通信案例练习把案例Todo-list改成使用动画与过度34.学习vue2遇到过的问题及个人总结
