Vue核心特性09，Vue 生命周期详解：8 个阶段的执行时机与应用场景

在 Vue 开发中，理解组件的生命周期是掌握 Vue 核心原理的关键。Vue 组件的生命周期如同一个对象的 “从生到死”，从创建、挂载、更新到销毁，每个阶段都有其特定的执行时机和应用场景。Vue2 将生命周期划分为 8 个核心阶段（也可细分为更多钩子函数），本文将逐一拆解这 8 个阶段，结合实际场景说明其使用方式，帮助你更优雅地编写 Vue 代码。

一、Vue 生命周期的整体脉络

首先，我们需要明确 Vue2 组件生命周期的整体流程：创建阶段（初始化）→ 挂载阶段（渲染 DOM）→ 更新阶段（响应式数据变化）→ 销毁阶段（清理资源）。这四个大阶段又细分为 8 个核心钩子函数，按执行顺序依次为：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

二、8 个核心阶段：执行时机 + 应用场景

1. beforeCreate（创建前）

执行时机：组件实例刚刚被初始化，此时数据观测（data）、事件监听、方法定义都还未完成，this指向组件实例，但无法访问data、props、methods中的内容。

应用场景：这个阶段几乎很少使用，因为能做的操作非常有限。仅可用于初始化一些与组件数据无关的全局配置，比如记录组件创建日志。

代码示例：

export default {
  beforeCreate() {
    console.log('beforeCreate：', this.msg); // undefined
    console.log('beforeCreate：', this.sayHello); // undefined
    // 可执行：记录日志、初始化全局第三方库（无需组件数据）
  },
  data() {
    return {
      msg: 'Hello Vue'
    };
  },
  methods: {
    sayHello() {
      console.log(this.msg);
    }
  }
};

2. created（创建完成）

执行时机：组件实例的数据观测、属性和方法的初始化已完成，能访问data、props、methods，但DOM 节点还未生成，$el属性不存在。

应用场景：这是常用的钩子之一，适合执行数据初始化、异步请求（非 DOM 相关）、事件绑定（非 DOM 事件） 等操作。比如从后端获取初始数据，无需等待 DOM 渲染。

注意：若在此处操作 DOM，会报错，因为 DOM 尚未挂载。

代码示例：

export default {
  data() {
    return {
      list: []
    };
  },
  created() {
    console.log('created：', this.msg); // Hello Vue
    console.log('created：', this.$el); // undefined
    // 异步请求获取数据
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const res = await fetch('/api/list');
      this.list = await res.json();
    }
  }
};

3. beforeMount（挂载前）

执行时机：模板编译完成，虚拟 DOM 已生成，但尚未挂载到真实 DOM 节点上，$el属性已存在（指向虚拟 DOM），但页面中还看不到渲染后的内容。

应用场景：可用于最后一次修改数据（不会触发额外的更新），或做一些挂载前的准备工作，比如修改虚拟 DOM 的配置。使用场景较少，一般可被created或mounted替代。

代码示例：

export default {
  data() {
    return {
      msg: 'Hello Vue'
    };
  },
  beforeMount() {
    console.log('beforeMount：', this.$el); // 存在（虚拟DOM）
    console.log('页面中是否显示msg？', false);
    // 最后修改数据，不会触发更新
    this.msg = 'Hello Vue beforeMount';
  }
};

4. mounted（挂载完成）

执行时机：虚拟 DOM 成功挂载到真实 DOM 节点，页面中能看到渲染后的内容，$el指向真实 DOM 元素。此时组件的 DOM 结构已完全可用。

应用场景：这是最常用的钩子之一，适合执行DOM 相关操作、初始化第三方 UI 库（如 ECharts、Element UI）、绑定 DOM 事件等。比如初始化图表、获取 DOM 元素的尺寸。

注意：若组件包含子组件，mounted仅在当前组件挂载完成后执行，子组件的mounted可能晚于当前组件。

代码示例：

export default {
  mounted() {
    console.log('mounted：', this.$el); // 真实DOM元素
    // 初始化ECharts图表
    this.initChart();
    // 绑定DOM事件
    this.$el.addEventListener('click', this.handleClick);
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$el.querySelector('#chart'));
      chart.setOption({ /* 配置项 */ });
    },
    handleClick() {
      console.log('DOM被点击了');
    }
  },
  beforeDestroy() {
    // 销毁时移除事件监听，避免内存泄漏
    this.$el.removeEventListener('click', this.handleClick);
  }
};

5. beforeUpdate（更新前）

执行时机：当组件的响应式数据发生变化时触发，此时数据已更新，但虚拟 DOM 尚未重新渲染，页面内容还是旧的。

应用场景：可用于在数据更新前做一些预处理，比如记录旧数据、取消某些异步请求，或阻止不必要的更新（不推荐，更推荐使用计算属性或 watch）。使用场景较少。

代码示例：

export default {
  data() {
    return {
      count: 0
    };
  },
  beforeUpdate() {
    console.log('beforeUpdate：旧数据', this.count); // 已更新后的数值？不，数据已改，DOM未更
    console.log('页面中count：', document.querySelector('.count').innerText); // 旧数值
    // 预处理操作
  },
  methods: {
    addCount() {
      this.count++;
    }
  }
};

6. updated（更新完成）

执行时机：数据更新后，虚拟 DOM 重新渲染并挂载到真实 DOM，页面内容已更新为新数据。

应用场景：适合执行数据更新后的 DOM 操作，比如重新计算 DOM 元素的尺寸、更新第三方库的配置（因数据变化需要重新渲染的场景）。

注意：避免在updated中修改响应式数据，否则会陷入无限更新循环。

代码示例：

export default {
  data() {
    return {
      list: [1, 2, 3]
    };
  },
  updated() {
    console.log('updated：页面中list已更新');
    // 重新计算列表高度
    const listHeight = this.$el.querySelector('.list').offsetHeight;
    console.log('列表高度：', listHeight);
  },
  methods: {
    addItem() {
      this.list.push(Math.random());
    }
  }
};

7. beforeDestroy（销毁前）

执行时机：组件实例即将被销毁，此时组件的数据、方法、DOM 都还可用，但已进入销毁流程。

应用场景：这是非常重要的钩子，用于清理资源，防止内存泄漏。比如取消异步请求（axios cancelToken）、移除 DOM 事件监听、销毁第三方库实例（如 ECharts、定时器）。

代码示例：

export default {
  data() {
    return {
      timer: null
    };
  },
  mounted() {
    // 开启定时器
    this.timer = setInterval(() => {
      console.log('定时器执行中');
    }, 1000);
    // 发起异步请求
    this.source = axios.CancelToken.source();
    this.fetchData();
  },
  methods: {
    async fetchData() {
      await axios.get('/api/data', {
        cancelToken: this.source.token
      });
    }
  },
  beforeDestroy() {
    // 清除定时器
    clearInterval(this.timer);
    // 取消异步请求
    this.source.cancel('组件销毁，取消请求');
    // 销毁ECharts实例
    this.chart?.dispose();
  }
};

8. destroyed（销毁完成）

执行时机：组件实例已被完全销毁，所有数据绑定、事件监听、子组件都被移除，this仍指向组件实例，但已无实际意义。

应用场景：几乎很少使用，可用于记录组件销毁日志，或做最后的清理工作（一般在beforeDestroy中已完成）。

代码示例：

export default {
  destroyed() {
    console.log('组件已销毁');
    // 最后的日志记录
  }
};

三、Vue 生命周期的关键注意事项

1. 避免内存泄漏：在beforeDestroy中务必清理定时器、事件监听、第三方库实例，这是开发中最容易忽略的点。
2. 异步请求的时机：created和mounted都可发起异步请求，created中发起请求更早（无需等待 DOM），但如果请求依赖 DOM，则需在mounted中执行。
3. 子组件生命周期：父组件的mounted执行早于子组件的mounted，而父组件的beforeDestroy执行晚于子组件的beforeDestroy。
4. Vue3 的变化：Vue3 中使用组合式 API（setup）替代了部分生命周期钩子，如setup对应beforeCreate和created，但仍保留了onMounted、onUpdated等钩子，逻辑基本一致。

四、总结

Vue 的 8 个生命周期阶段覆盖了组件从创建到销毁的全过程，每个阶段都有其明确的执行时机和应用场景。掌握这些钩子函数，能让我们在合适的时机执行对应的逻辑，写出更高效、更健壮的 Vue 代码。核心记住：数据初始化用 created，DOM 操作用 mounted，资源清理用 beforeDestroy，这三个钩子是日常开发中使用频率最高的。