本文共 1699 字，大约阅读时间需要 5 分钟。

vue的生命周期

1. 生命周期

• Vue实例从创建到销毁的过程，就是生命周期
• 创建、初始化数据、编译模板、挂载DOM、渲染、更新、渲染、销毁等一系列过程

2. 周期阶段

Vue生命周期可以简单分为四个阶段:

• 创建阶段----> beforeCreate,created
• 挂载阶段----> beforeMount,mounted
• 运行阶段----> beforeUpdate,updated
• 销毁阶段----> beforeDestroy,destroyed

3. 生命周期详解

1. 创建阶段

1. beforeCreate

• beforeCreate是new Vue之后触发的第一个钩子函数,此时data、methods、computed、以及watch上的数据和方法还未初始化，都不能被访问
• 在初始化实例之后，数据观测和event\watcher事件配置之前被调用

2. created

• 数据据观测、property和方法的运算，watch、event事件回调
• data和methods初始化完成，异步请求适合在此钩子函数中调用
• 此时无法与Dom交互，如果必须则用this.$nextTick来访问

2. 挂载阶段

1. beforeMount

• template模板已经导入render函数编译,但未进行渲染

2. mounted

• DOM已经完成挂在，双向数据绑定，可以$refs属性对DOM进行操作
• 如果希望整个视图渲染完毕

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

3. 运行阶段

1. beforeUpdate

• beforeUpdate发生在响应式数据更新之前，虚拟DOM重新渲染之前被触发，
• 你可以在当前阶段进行更改数据，不会造成重新渲染，但会再次触发当前钩子函数

2. updated

• 此时DOM已经更新，现在可以执行依赖于DOM的操作
• 如果要相应状态改变，最好使用计算属性或 watcher 取而代之。最好不要在此期间更改数据，因为这可能会导致无限循环的更新。
• 如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick。

updated: function () {     this.$nextTick(function () {      			// 代码将在整个视图重新渲染后执行  })}

4. 摧毁阶段

1. beforeDestroy

• 实例销毁之前，在这期间实例完全可以被使用
• 在这时进行清楚定时器的操作

2. destroyed

• 实例被销毁、实例也被销毁、事件监听器被移除

4. 周期Demo

        
       
   
    
    
{   {    message }}
    
    change改变数据    
    destroy销毁实例    
    
    
    获取实例dom    
    获取实例data    
    获取实例methods