Vue.js中的生命周期函数

1. 组件创建阶段：

---

1. beforeCreate()，这是我们遇到的第一个生命周期函数。表示实例被完全创建出来之前，会执行这个生命周期函数。
2. created()，这是遇到的第二个生命周期函数。
3. beforeMount()，这是遇到的第三个生命周期函数。表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中去。在beforeMount()执行的时候，页面中的元素，还没有真正被替换过来，只是之前写的一些模版字符串。
4. mounted()，这是遇到的第四个生命周期函数。表示内存中的模版已经真实地挂载到了页面中，用户已经可以看到渲染好的页面。mounted是实例创建期间的最后一个生命周期函数，当执行完mounted的时候，表示实例已经完全创建好了，此时如果没有其它操作的话，这个实例就保存在我们的内存中。如果要通过某些插件操作页面中的DOM节点，最早要在mounted中进行。只要执行了这个函数，就表明整个Vue实例已经初始化，此时脱离组件创建阶段，进入组件运行阶段。

2. 组件运行阶段：

---

这里的两个函数会根据数据的改变，有选择性地触发0~无穷多次。

1. beforeUpdate()，这时候我们的页面还没有被更新，但是数据已经被改变，因为此函数的触发时机是"数据改变"。当执行beforeUpdate()的时候，页面中的显示的数据还是旧的，但是此时data的数据是最新的，页面尚未和最新的数据保持同步。
2. updated()，此函数执行的时候，页面和data数据已经同步了。

这两个函数过渡阶段，会先根据data中最新的数据在内存中重新渲染出一份最新的内存DOM树，在它被更新之后，会把最新内存的DOM树重新渲染到真实的页面中。至此，完成了数据从data(Model层) -> view(视图层)的更新。

3. 组件销毁阶段：

---

1.beforeDestroy()，当执行这个函数的时候，Vue实例就已经从运行阶段进入了销毁阶段，此时实例身上所有的data和所有的methods等等都处于可用状态，还未执行真正的销毁过程。
2.destroyed()，执行到这个函数，组件已经被完全销毁，组件中所有的数据、方法、指令、过滤器等均不可用。