vue的生命周期钩子函数

每个vue实例在被创建时都要经过一系列的初始化过程。

所有的生命周期钩子自动绑定this上下文到实例中，因此可以在函数中访问数据，对属性和方法进行运算。

vue的生命周期：

一、vue实例创建阶段

1、beforeCreate

vue实例在内存中刚被创建，this变量还不能使用，数据对象（data）和方法（methods）未初始化，
watcher中的事件都不能获得到。
复制代码

2、created

实例已经在内存中创建好，数据和方法已经初始化完成，但是模板还未编译，页面还没有内容，
还不能对dom节点进行操作（此时访问this.$el和this.$refs.xxx都是undefined）。
复制代码

3、beforeMount

找到对应的template模板，编译成render函数，转换成虚拟dom,此时模板已经编译完成，数据未
挂载到页面，也就是说在这个阶段你可以看到标签间的双花括号，数据还未渲染到页面中；

render:h=>h(App)
在beforeMount之后和mounted之前，还有渲染render函数，它的作用是把模板渲染成虚拟dom。
复制代码

4、mounted

模板编译好了，虚拟dom渲染成真正的dom标签，数据渲染到页面，此时vue实例已经创建完毕，
如果没有其他操作的话，vue实例会静静的躺在内存中，一动不动。
一般会在mounted中来渲染从后端获取的数据。
（页面初始化时，如果有操作dom的事件一般也会放在mounted钩子函数中。
当然，也可以在create中，前提需使用this.$nextTick(function(){}),在回调函数中操作dom。）
复制代码

二、vue实例运行阶段

1、beforeUpdate

数据依赖改变或者用$forceUpdate强制刷新时，对象data中的数据已经更改（虚拟dom已经重新渲染），
但是页面中的值还是原来，未改变，因为此时还未开始渲染dom;
复制代码

2、updated

此时data中的数据和页面更新完毕，页面已经被重新渲染。
复制代码

三、vue实例销毁阶段

1、beforeDestroy

实例销毁前使用，此刻实例还是可以用的。
复制代码

2、destroyed

vue实例被销毁，观察者、子组件、事件监听被清除（页面数据不会消失，只不过是响应式无效了）
复制代码