Vue生命周期

Vue生命周期

new Vue()

实例化vue对象

Init

初始化事件和生命周期

beforeCreate（可以加载动画）

组件实例刚被创建，还没有实例化之前，执行一些初始化的操作

未初始化
this.$el       undefined
this.$data     undefined

created（可以结束加载动画，发起异步网络请求）

组件实例创建完成，属性已经绑定，但是DOM还没有生成，$el属性不存在，页面未被展示

完成了data的初始化
this.$el       undefined
this.$data     初始化完成

之后判断是否存在$el。存在，则继续编译；不存在，则停止编译

如果继续编译，则判断是否有template。有，则将其编译成render函数；没有，则编译外部html

如果template中组件，则render方法渲染组件

beforeMount

完成了虚拟DOM配置：模板已被编译，把data里面的数据和模板生成html（render方法渲染虚拟DOM为真实的DOM元素，但是还没有比对替换到页面上）

但是此时还没有挂载html到页面上

完成了初始化
this.$el       初始化完成
this.$data     初始化完成

之后给vue添加$el成员，并且替换掉挂载的DOM元素

mounted（可以发起网络请求AJAX交互）

用上面编译好的html内容替换el属性指向的DOM对象。将编译好的html内容替换了$el属性指向的DOM对象，DOM结构完成，页面显示。（真实DOM元素替换了el指向的DOM对象）

完成挂载（模板和数据编译的html挂载到了页面上）

beforeUpdate

当数据更新之前调用。

虚拟dom中根据data变化去更新html

updated

在数据更新之后调用

将虚拟DOM更新完成的HTML更新到页面上

activated

keep-alive组件激活时调用

deactivated

keep-alive组件停用时调用

beforeDestroy

实例销毁之前调用。实例任然可用

destroyed

实例销毁之后调用。之后如果再执行更新数据操作，页面则不会同步更新。