谈到 vue 的生命周期, 相信许多人并不陌生. 但大部分人和我一样, 只是听过而已, 具体用在哪, 怎么用, 却不知道. 我在学习 vue 一个多礼拜后, 感觉现在还停留在初级阶段, 对于 mounted 这个挂载还不是很清楚. 放大说, 对 vue 的生命周期不甚了解, 这对后面的踩坑是相当不利的.
因为我们有时候会在几个钩子函数里做一些事情, 什么时候做, 在哪个函数里做, 我们不清楚. 所以, 弄清楚生命周期是非常有必要的.
1, 生命周期介绍
Vue 实例有一个完整的生命周期, 也就是从开始创建, 初始化数据, 编译模板, 挂载 Dom, 渲染→更新→渲染, 销毁等一系列过程, 我们称这是 Vue 的生命周期. 通俗说就是 Vue 实例从创建到销毁的过程, 就是生命周期.
每一个组件或者实例都会经历一个完整的生命周期, 总共分为三个阶段: 初始化, 运行中, 销毁.
2, 生命周期各个阶段
(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, 在这里做善后工作也可以.
来源: https://www.cnblogs.com/le220/p/10040589.html