Vue生命周期

^O^——

已于 2022-09-05 02:28:48 修改

阅读量281

点赞数

文章标签： vue.js javascript 前端 vue生命周期

于 2022-08-16 19:28:09 首次发布

本文链接：https://blog.csdn.net/weixin_62332711/article/details/126203069

版权

本文详细阐述了Vue实例从创建到销毁的整个生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy及destroyed等关键钩子函数的作用和执行顺序。在每个阶段，Vue实例的状态和数据处理进行了深入解析，帮助理解Vue组件的渲染和更新流程。

摘要由CSDN通过智能技术生成

vue实例创建到销毁的整个过程就是vue的生命周期：开始创建 -> 初始化数据 -> 编译模版 -> 虚拟Dom挂载 -> 监听数据变化 -> 销毁。

1.new Vue()：创建Vue实例。

2.Init Events & Lifecycle：初始化事件和生命周期函数。

3.beforeCreat：触发钩子函数beforeCreate（这个钩子函数的意思是创建之前触发），Vue实例里面组件的一些属性（props）、数据（data）、方法（methods）都还没有被创建，还不能使用。

4.Init injections & reactivity：初始化Vue实例里面的属性（props）、数据（data）、方法（methods）。

5.created：触发钩子函数created（已创建），Vue实例里面的属性（props）、数据（data）、方法（methods）创建成功，已经可以使用了，但是还没有生成模板结构（意思就是：Vue实例里面的数据已经渲染完成了，但是数据还没有挂载在网页上面）。

6.Has "el" option?：判断有没有el这个选项/属性（就是在Vue实例里面有没有这个el（挂载点）这个选项）。

6.1.Yes：如果有的话，则继续往下判断，Has "template" option?：有没有template（模板）这个选项；

6.1.No：如果没有el这个选项/属性，when vm.$mount(el) is called：查看另一种挂载方式：$.monut，再继续往下判断，Has "template" option?：有没有template（模板）这个选项。

7.无论是Yes，还是No，都会进入 Has "template" option?：有template（模板）这个选项

7.1.如果是Yes，有template（模板）这个选项，compile template into render function*：将模板编译为渲染函数*（编译template里面的HTML代码）。

7.2.如果是No，没有template（模板）这个选项，compile el's outerHTML as template*：将el的outerHTML编译为模板*（编译vue实例挂载点里面的HTML代码）。

无论是Yes还是No，都会生成HTML代码

8.beforeMount：触发钩子函数beforeMount，把内存中编译好的HTML结构渲染到浏览器中，但是浏览器中还没有当前组件的DOM结构（HTML结构已经渲染到浏览器中，还没有挂载好）

9.create vm.$el and replace el with it：创建虚拟机。替换导视牌el属性指定放入DOM元素（编译生成的HTML结构）。

10.mounted：触发mounted钩子函数，已经把内存中的HTML结构，成功的渲染到了浏览器上，此时浏览器已经包含了当前组件的DOM结构（Vue实例里面的数据已经渲染到浏览器上了，可以在页面上进行展示）。

下面的红色背景色Mounted：监听数据有没有发生改变

when data changes：当有data数据改变（比如触发了点击事件使数据发生了改变） – 重复这个循环

11.beforeUpdate：将要根据变化过后、最新的数据，重新渲染组件的模板结构（修改后，获取到了最新的数据，Vue实例里面的数据发生了改变，但还没有渲染到页面）。

12.Virtual DOM re-render and patch：虚拟DOM重新渲染和补丁

13.updated：已经根据最新的数据，完成了组件的DOM结构的重新渲染（更新后的数据会重新渲染到页面）。

红色背景色Mounted下面的

when vm.$destroy() is called：当$destroy()被调用，说明组件DOM正在被移除(例v-if)。

14.beforeDestroy：触发钩子函数beforeDestory（销毁前，可以释放资源，解绑自定义事件等操作）：将要销毁此组件，但是还没有销毁，组件还处于正常状态。

15.Teardown watchers,child components and event listeners：进行拆卸监视器、子组件和事件监听器。

Destroyed：实例销毁后, 最后触发一个钩子函数

16.destroyed：触发钩子函数destroyed（销毁后）：组件已经被销毁，组件在浏览器中对应的DOM结构已经被完全移除（Vue实例已经被销毁）。

总结：

页面刷新完成，会执行4个钩子函数beforeCreate（创建前）、Create（创建后）、beforeMount（挂载前）、mounted（挂载后）；
修改的时候会触发两个钩子函数beforeUpdate（修改前）和updata（修改后）；
生命周期一共有8个方法，beforeCreate（创建前）、Create（创建后）、beforeMount（挂载前）、mounted（挂载后）、beforeUpdate（修改前）、updated（修改后）、beforeDestroy（销毁前）、destroyed（销毁后）。

完。