Vue实例生命周期详解

jiezi

5 年前

vue 的生命周期的含义实质上就是一个实例从创建到销毁的一系列可以进行的操作

var vm = new Vue({// 选项})

其中 VM 是 (ViewModel) 的缩写，经常用来表示 Vue 实例，而 new Vue()表示创建了一个 Vue 的实例

实例创建后，会初始化一个空的 Vue 实例对象，但是这个时候，这个实例对象上只有 默认的一些生命周期函数和默认的事件 ，其他都未创建
然后出现第一个生命周期钩子

这个钩子执行时，Vue 实例的 data 和 methods 中的数据还没有初始化，所以可以认为 beforeCreate 是实例数据绑定之前的钩子

初始化空的 Vue 实例后，紧接着 data 和 methods 也被初始化，产生了第二个生命周期钩子

create 是 data 和 methods 数据绑定 后产生的钩子，所以如果调用 methods 和 data 中的数据，最早只能在 create 中操作

这两个生命周期完毕后，Vue 实例就初始化完毕了

Vue 实例初始化完毕后，Vue 开始编辑模板，把 Vue 代码中使用的指令进行执行，最终在内存中生成一个编译好的模板字符串，然后把这个模板字符串，渲染为内存中的 DOM，此时，内存中以及存在了渲染好的模板，但是还没有真正的挂载到页面中，所以页面仍旧是旧的页面

执行指令 > 生成模板字符串 > 渲染为 DOM > 未挂载

这个生命周期钩子执行的那一刻就是内存中已经存在了渲染好的 DMO 但是认为挂载到页面去，我们可以在页面还没挂载前，先初始化页面要显示的数据

执行后，已经把编译后模板挂载到 el 节点上去了，产生了下一个生命周期

这个钩子执行时，我们可以通过某些插件操作页面的 DOM 节点，要做 mount 中进行

这个周期是实例在生命运行中的状态，中有两个生命周期钩子，在中间会用新的数据渲染出新的内存 DOM 树，当新的 DOM 树被更新后，会把新的 DOM 树重新加到页面中
数据从 Model 层 > View(视图)

当执行这个状态时，页面显示的仍然是旧的数据，此时数据是新的，页面显示数据未与最新数据保持一致

当执行这个状态时，页面显示数据和最新的数据已经保持同步

此时有两个生命周期钩子可使用

执行这个钩子函数时，Vue 实例已经从运行阶段到了销毁阶段，但实例上所有的 data 和所有的 methods，以及过滤器，指令，都属于可用状态，还没有真正执行销毁过程

当执行这个钩子函数时，组件以及完全被销毁，此时组件中的所有，methods，data，监听器，过滤器，都无法使用

至此，整个 Vue 实例完成它的工作，被清除出内存

初始化阶段