Vue的生命周期

基本概念

Vue实例(组件)从创建到销毁的四大阶段合并称为Vue的生命周期

四大阶段

初始化阶段 beforeCreate,created

在Vue实例被创建的时候，会先初始化事件和钩子函数，初始化完成后，会自动调用 beforeCreate 方法

在调用 beforeCreate 方法之后，会继续初始化 data,methodes,props,computed,components 等属性方法

初始化完成后，自动调用 created 钩子函数

挂载阶段

在初始化完成后，Vue 实例进入挂载阶段，开始编译 template 返回 rander 渲染函数，如果没有 template 标签，则将 el 控制区格式化为操作模板

编译或者格式化完成后，执行 beforeMount 方法，然后向后推进

会将格式化完成后形成的 虚拟DOM 挂载到 真实DOM 上

挂载完成会调用 mounted 钩子函数，然后继续向后推进

这时候已经将 Vue 实例渲染到页面上了，经过了两个阶段，调用了四个方法：初始阶段的beforeCreate,created，挂载阶段的 beforeMount,mounted，在一个 Vue 实例被创建出来的时候只会进行一次该过程，所以以上方法在 Vue 实例被创建出来的时候只会执行一次

更新阶段

当 data 的数据更新的时候，触发 beforeUpdate,此时 data 已经修改完毕，但是未合并 虚拟DOM 到 真实DOM

beforeUpdate 方法调用完毕，生成 虚拟DOM 并和并到 真实DOM 上

合并完成，调用 updated 方法

销毁阶段

当一个实例被销毁的时候（v-if），会在拆卸所有的属性数据，定时器之前调用 beforeDestroy 方法

在调用 beforeDestroy 方法完毕后，会开始拆卸所有的属性数据，定时器

拆卸完成后，调用 destroyed 方法，方法一旦调用，实例就会被销毁

总述

在 Vue 实例被创建的时候，会先进行事件和钩子函数的初始化，此时执行 beforeCreate 方法

在 beforeCreate 方法被执行后，开始进行 data,methods 等属性方法的注入，此时调用 created，可以操作 data，mehtods 等属性方法了

在所有的 属性和方法被注入后，开始进行 el 控制区域的判断，如果存在 el 控制区域，则直接执行 template 初始化操作，否则暂停当前的生命周期，等待 $mount 方法被执行，$mount 执行后开始进行 template 格式化操作

此时开始进行 虚拟DOM 的生成，进入第二个阶段，挂载阶段

挂载阶段开始，调用 beforeMount 方法

beforeMount 方法执行完毕，开始将 vm 的所有属性和方法，样式及Js代码的组件内容合并到 真实DOM 树，真实DOM 树合并完毕后，执行 mounted 方法，此时可以对 DOM 进行操作

当 data 被更新的时候，进入第三阶段——更新阶段

更新阶段开始，beforeUpdate 被执行，此时的 data 已经是最新的 data ，但是页面上的 DOM 数据还未更新，所以 Vue 实例开始对 data 的最新数据开始生成 虚拟DOM ，并将其以热更新补丁的形式合并到 真实DOM 树

补丁操作完成后调用 updated 方法，此时 data 和 页面上的 DOM 都已经是最新的

如果 this.$destroy 被调用，说明这个 Vue 实例（组件）将会被销毁，此时进入 Vue 实例的最终阶段——销毁阶段

执行销毁前，调用 beforeDestroy 方法，此时实例上的所有属性方法及定时器事件等仍有效

方法执行完毕后开始对实例上的所有属性方法及定时器事件等进行拆卸

拆卸完成后执行 destroyed 方法，方法一旦被调用，说明 Vue 实例已经被完全销毁