VUE 的生命周期

145 阅读2分钟

Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载 Dom、 渲染→更新→渲染、销毁等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创 建到销毁的过程,就是生命周期。

每一个组件或者实例都会经历一个完整的生命周期,总共分为三个阶段:初始化、运行中、销毁。

  1. 实例、组件通过 new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行 beforeCreate 钩子函数,这个时候,数据还没有挂载呢,只是一个空壳,无法访问 到数据和真实的 dom,一般不做操作

  2. 挂载数据,绑定事件等等,然后执行 created 函数,这个时候已经可以使用到数据, 也可以更改数据,在这里更改数据不会触发 updated 函数,在这里可以在渲染前倒数 第二次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

  3. 接下来开始找实例或者组件对应的模板,编译模板为虚拟 dom 放入到 render 函数 中准备渲染,然后执行 beforeMount 钩子函数,在这个函数中虚拟 dom 已经创建 完成,马上就要渲染,在这里也可以更改数据,不会触发 updated,在这里可以在渲 染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数 据的获取

  4. 接下来开始 render,渲染出真实 dom,然后执行 mounted 钩子函数,此时,组件 已经出现在页面中,数据、真实 dom 都已经处理好了,事件都已经挂载好了,可以在 这里操作真实 dom 等事情...

  5. 当组件或实例的数据更改之后,会立即执行 beforeUpdate,然后 vue 的虚拟 dom 机制会重新构建虚拟 dom 与上一次的虚拟 dom 树利用 diff 算法进行对比之后重新 渲染,一般不做什么事儿

  6. 当更新完成后,执行 updated,数据已经更改完成,dom 也重新 render 完成,可 以操作更新后的虚拟 dom

  7. 当经过某种途径调用$destroy 方法后,立即执行 beforeDestroy,一般在这里做一 些善后工作,例如清除计时器、清除非指令绑定的事件等等

  8. 组件的数据绑定、监听...去掉后只剩下 dom 空壳,这个时候,执行 destroyed,在 这里做善后工作也可以

image.png

image.png

image.png