Vue 生命周期

 

1, 实例，组建通过new Vue() 创造出来之后，会初始化事件和生命周期（init Events & LifeCycle),然后会执行beforeCreate钩子函数，这个时候，数据还没有加载，所以不能访问到数据和真实的DOM,一般不做操作。

2，加载数据，绑定事件（init Injections & Reactivity ), 然后执行created 函数，这个时候已经可以获取到数据，做修改也不会触发updated 函数（倒数第二次做修改也不会触发updated函数)，所以一般做数据的初始化。

3，找到组建，实例以及其对应的模板,compile template => 虚拟的DOM,准备放入到render 函数中进行渲染，然后执行beforeMount 函数，在beforeMount 函数中，虚拟的DOM已经创建完成，马上要开始渲染，此时做数据的修改也不会调用其它钩子函数,(最后一次渲染前做数据的修改),这里一般也是可以做数据的初始化。

4,然后就是执行render 函数，渲染出真实的DOM,执行mounted 钩子函数，所有的数据全部挂载，DOM 元素已经渲染在页面中，此时可以操作真实的DOM。

5，当实例或者组建发生变化之后，会立刻执行beforeUpdate 函数，虚拟DOM 会与上一次的虚拟DOM 进行diff 比较，然后重新渲染。

6，数据完成更新之后，会执行update 函数，数据更改，重新render,重新可以操作DOM。

7,当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等。

8,组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以。

 

Vue 的生命周期共有8个阶段，创建前后，载入前后，更新前后，销毁前后