vue 生命周期

有关vue的生命周期是重点，流程一定要清晰。

 

vue的生命生命周期可将其分为三个阶段，具体如下：

 

第一阶段：创建阶段：

①beforeCreate：这个阶段仅仅表示Vue实例被刚刚创建出来，但是还没有初始化好Vue实例中的数据和方法，所以在这里面是不能够调用data和methods的。

②created：这个阶段是最早能够访问Vue实例中保存的数据（data）和方法（methods）的地方。

当以上两步完成后，开始编译模板，根据data中的数据和指令生成HTML，但是并没有渲染到页面上，仅仅只会保存到内存中。（加强理解：什么叫根据data中的数据和指令生成HTML？我们在写HTML时，会将data中定义的数据以{{msg}}的方式写入dom节点中，但是在编译时，Vue帮我们做了一件事，即会在data中拿到msg的数据替换{{msg}}，重新生成新的HTML）

③beforeMount：这一阶段完成了模板的编译，但是还没有挂载到页面上。并没有进行替换操作，此时还是{{msg}}

④mounted：Vue已经完成了模板的渲染，表示我们已经可以拿到界面上渲染的内容了，不再是{{msg}}，而是msg对应的具体数据。

 

第二阶段：运行阶段

①beforeUpdate：mounted完成后，会实时监听data的变化，随时准备更新dom。一旦Vue实例中data数据发生了变化，最先执行这个方法。此时数据已经更新了，但是界面并没有更新。

②updated：这一阶段根据最新的数据重新生成渲染的内容，替换掉之前的内容

 

第三阶段：销毁阶段（可以用v-if来模拟，v-if的实质是将对应的组件直接删除和重新创建。）

①beforeDestory：这个阶段实例准备销毁，但还未被销毁，只要组件不被销毁，就不会走这个阶段，这个阶段也是我们最后能访问到Vue实例中data和methods的地方。

②destoryed：组件完全销毁时调用，这个方法中不可以操作data和methods。