Vue生命周期

• 所有生命周期的钩子自动绑定this上下文的实例中,通过this都可以访问.

1. beforeCreate

• 实例初始化之后,数据观测(data observe)和event/watcher事件配置之前被调用

2. created

• 在实例创建完成后被立即调用,实例已完成数据观测(data observe),property和方法运算,watch/event事件回调,然而,还没有挂载,所以$el property不可用

3. beforeMount

• 在挂载之前被调用,相关的rander函数首次被调用

4. mounted

• 实例被挂载后调用,el 被创建的 vm.$el替换,如果希望整个视图都渲染完毕,可以在mounted内部使用vm.$nextTick

mounted:function(){
  this.$nextTick(function(){
  	
  })
}

5. beforeUpdate

• 数据更新是调用,发生在虚拟DOM打补丁之前,适合操作更新之前的DOM,可以手动溢出已添加的事件监听器.服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行.

6. updated

• 数据更改导致虚拟DOM重新渲染和打补丁,在这之后会调用.当走到这个钩子中时,组件DOM就已经更新了,现在可以执行依赖当前DOM的操作了,尽量避免此操作,通常使用 computed或者watch .该钩子在服务端渲染期间不被调用.updated不会保证所有的子组件也都一起被重绘,如果希望等到整个视图都重绘完毕,可以使用vm.$nextTick

7. activated

• 被keep-alive缓存的组件激活时被调用

8. deactivated

• 被keep-alive缓存的组件停用是调用

9. beforeDestory

• 实例销毁之前调用.在这一部,实例仍然完全可用.

10. destoryed

• 实例销毁后调用,该钩子被调用后,对应的Vue实例的所有指令都被解绑,所有事件监听器被移除,所有子实例也都被销毁.

11. errorCaptured

• 2.5.0新增的.捕获一个来自子孙的错误时被调用.接收三个参数:错误对象,发生错误的组件实例,以及一个包含错误来源信息