vue生命周期

                                 

var app = new Vue({
      el: '#app',
      data: {
          message : "hello world" 
      }
}

以下分析上述vue实例的创建过程：

（1）beforeCreate()：此时vue实例还未创建完成，数据、事件都没有完成初始化，更没有绑定到Dom元素上；

• app.$el => undefined
• app.$data => undefined
• this.message => undefined

（2）created()：vue实例创建完成，数据绑定、事件绑定都已完成，但并未挂载到Dom元素；

• app.$el => undefined
• app.$data => [object Object]
• this.message => hello world

（3）beforeMount()：vue实例创建完成，挂载到Dom元素，但此时Dom元素还未渲染；

• app.$el => [object HTMLDivElement]
• app.$data => [object Object]
• this.message => hello world

（4）Mounted()：vue实例挂载到Dom元素上，并且Dom完成渲染；

• app.$el => [object HTMLDivElement]
• app.$data => [object Object]
• this.message => hello world

（5）beforeUpdate()：vue实例发生改变，此时Dom中还未更新渲染；
（6）updated()：vue实例发生改变，且Dom结构更新完毕；
（7）beforeDestory()：vue开始销毁，但此时该实例仍可以使用；
（8）destoryed()：vue实例销毁完成，数据绑定、事件绑定都已解绑，子组件也被销毁完毕。