10，vue生命周期

生命周期钩子=生命周期函数=生命周期事件

根据生命周期的不同分为三类：

• 创建阶段的生命周期

• 运行阶段的生命周期

• 销毁阶段的生命周期

对于生命周期来

创建阶段的生命周期

1556355935136.png

1556356286845.png

• beforeCreate()方法是在实例还没有别完全创建出来之前执行，这个方法执行的时候，无论是data中的数据还是methods中的方法都没有被初始化

• created()方法是此时已经初始化好了Vue对象，这是最早能操作data中数据和methods中方法的地方

• beforeMount()这是指该模板已经在内存中编辑完成，但是尚未将其渲染到页面中去，在该方法执行期间，页面中的元素还没有经过Vue的渲染，此时的{{msg}}仍然是一个“{{msg}}”

• mounted()，表示内存中的模板已经渲染到页面中去，这个时候数据已经可以经过Vue的编译，该函数是实例创建的最后一个函数，此时实例已经完全创建好了，如果没有别的操作的话，此函数就静静躺在内存中，如果要使用某些插件操作页面上的DOM，最早要在mount中操作

1556355963015.png

1556356136544.png

1556356669684.png

运行阶段的生命周期

1556357252424.png

这两个事件，会根据data数据的改变选择性的触发0次或者多次

1556356994653.png

beforeUpdate()事件执行的时候，页面中显示的数据并没有更新，但是内存中的数据已经改变，也就是说此时页面尚未和最新的数据保持同步

1556357185235.png

update()事件执行的时候，页面中的数据已经和内存中保持一致了，也就是说此时已经是最新的了

1556357252424.png

---

销毁阶段的生命周期

1556357373618.png

---

完整的生命周期方法