Vue 2 生命周期钩子函数详解

Vue 2 的生命周期是指一个 Vue 实例从创建到销毁的整个过程，在这个过程中提供了一系列的钩子函数，让开发者可以在特定阶段添加自己的代码。

Vue 2 生命周期流程图

生命周期钩子函数详解

1. beforeCreate

执行时机: 实例初始化之后，数据观测(data observer)和事件配置(event/watcher)之前被调用。

适用场景:

• 此时实例的 data、methods、computed、watch 等都未被初始化，无法访问
• 可以用于整个应用初始化前的一些预处理工作
• 通常很少使用这个钩子

beforeCreate() {
  console.log(this.$data); // undefined
  console.log(this.$el);   // undefined
}

2. created

执行时机: 实例已经创建完成之后被调用。此时，实例已经完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。

适用场景:

• 异步请求获取数据（最常用场景）
• 对数据进行修改
• 初始化一些非DOM相关的操作
• 可以访问 data、props、computed、methods

created() {
  console.log(this.$data); // 已被初始化
  console.log(this.$el);   // undefined
  
  // 异步获取数据
  axios.get('/api/data')
    .then(response => {
      this.data = response.data;
    });
}

3. beforeMount

执行时机: 在挂载开始之前被调用，相关的 render 函数首次被调用。

适用场景:

• 可以访问到虚拟DOM，但尚未挂载到真实DOM
• 可以在这里进行一些挂载前的最后修改
• 一般较少使用

beforeMount() {
  console.log(this.$el); // undefined
}

4. mounted

执行时机: el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。

适用场景:

• DOM操作（最常用场景）
• 访问和操作DOM元素
• 初始化第三方插件（如图表库、轮播图等）
• 发送AJAX请求（如果created中未发送）

mounted() {
  console.log(this.$el); // 已被挂载
  
  // 初始化图表
  this.chart = echarts.init(this.$refs.chart);
  this.chart.setOption(this.chartOptions);
}

5. beforeUpdate

执行时机: 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

适用场景:

• 在数据更新后，DOM更新前，对现有DOM进行一些修改
• 可以在这里进一步地更改状态，不会触发附加的重渲染
• 适合在更新前访问现有的DOM

beforeUpdate() {
  // 可以在DOM更新前获取到DOM的原始状态
  console.log(this.$el.textContent);
}

6. updated

执行时机: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁之后调用。

适用场景:

• 当数据变化导致DOM重新渲染后，需要执行的操作
• 避免在此钩子中修改数据，否则可能会导致无限循环的更新
• 适合执行依赖于更新后DOM的操作

updated() {
  // DOM已更新，可以执行依赖于更新后DOM的操作
  console.log('DOM updated');
}

7. beforeDestroy

执行时机: 实例销毁之前调用。在这一步，实例仍然完全可用。

适用场景:

• 清理工作（最常用场景）
• 清除定时器
• 解绑自定义事件
• 取消订阅消息
• 销毁第三方插件实例

beforeDestroy() {
  // 清除定时器
  if (this.timer) {
    clearInterval(this.timer);
  }
  
  // 销毁图表实例
  if (this.chart) {
    this.chart.dispose();
  }
}

8. destroyed

执行时机: Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

适用场景:

• 执行一些最后的清理工作
• 通知其他组件该实例已被销毁
• 通常较少使用，大部分清理工作在beforeDestroy中完成

destroyed() {
  console.log('Component has been destroyed');
}

9. activated

执行时机: 被 keep-alive 缓存的组件激活时调用。

适用场景:

• keep-alive缓存的组件重新激活时执行
• 获取最新数据
• 恢复组件状态

activated() {
  // 组件被重新激活时，获取最新数据
  this.fetchData();
}

10. deactivated

执行时机: 被 keep-alive 缓存的组件停用时调用。

适用场景:

• keep-alive缓存的组件被停用时执行
• 保存当前状态
• 清理一些不需要保留的数据

deactivated() {
  // 组件被停用时，保存当前状态
  this.saveState();
}

生命周期钩子函数使用场景对比

父子组件生命周期执行顺序

最佳实践

1. created vs mounted:

   • 在 created 中进行数据请求，可以更快获取数据，提高首屏渲染速度
   • 在 mounted 中进行DOM操作和第三方库初始化

2. 避免在 updated 和 beforeUpdate 中修改数据:

   • 可能会导致无限循环的更新
   • 如果必须修改，使用条件判断确保不会造成循环

3. 清理工作:

   • 在 beforeDestroy 中进行清理工作，如清除定时器、解绑事件等
   • 防止内存泄漏

4. keep-alive 组件:

   • 使用 activated 和 deactivated 钩子处理缓存组件的特殊逻辑
   • 在 activated 中获取最新数据，而不是在 created 中

5. 性能优化:

   • 避免在生命周期钩子中进行大量计算
   • 可以使用计算属性或方法来替代

参考资料

• Vue.js 官方文档 - 生命周期钩子
• Vue.js 生命周期详解
• Vue.js 生命周期最佳实践