好的，下面我给你详细梳理 Vue 生命周期，并用清晰的示例说明每个阶段的作用和常用方法。我们以 Vue 2.x 和 Vue 3.x（Composition API） 两种情况一起说明。

一、Vue 生命周期概述

Vue 的生命周期指的是 一个 Vue 实例从创建到销毁的整个过程。理解生命周期有助于我们在合适的阶段执行操作（如获取数据、操作 DOM、清理定时器等）。

生命周期可以分为 三个阶段：

  1. 创建阶段（Creation）
  2. 挂载阶段（Mounting）
  3. 更新阶段（Updating）
  4. 销毁阶段（Unmounting）

二、Vue 2.x 生命周期详解

Vue 2 的生命周期钩子（Hooks）如下：

1. 创建阶段

钩子函数触发时机作用
beforeCreate实例初始化之后，数据观测（data observer）和事件/侦听器设置之前在这个阶段，data、computed、methods 等都还不可用
created实例创建完成后，数据观测和事件/侦听器已设置，但 $el 尚不可用可以在这里访问 data、computed、methods，常用于初始化数据或发起 API 请求

示例：

new Vue({
  data() {
    return { msg: 'Hello Vue!' }
  },
  beforeCreate() {
    console.log('beforeCreate:', this.msg); // undefined
  },
  created() {
    console.log('created:', this.msg); // Hello Vue!
  }
});

2. 挂载阶段（Mounting）

钩子函数触发时机作用
beforeMount在挂载开始之前，render 函数首次被调用之前可以在这里做一些渲染前的准备工作
mountedVue 实例挂载到 DOM 后调用可以访问 $el，常用于操作 DOM 或初始化第三方库

示例：

new Vue({
  el: '#app',
  template: '<div>{{ msg }}</div>',
  data() {
    return { msg: 'Hello Vue!' }
  },
  mounted() {
    console.log(this.$el.textContent); // Hello Vue!
  }
});

3. 更新阶段（Updating）

当数据变化时，Vue 会重新渲染 DOM，对应的生命周期钩子：

钩子函数触发时机作用
beforeUpdate数据更新后，DOM 更新前可以访问更新前的 DOM 状态
updatedDOM 更新完成后可以访问更新后的 DOM，但不要在这里修改数据，否则可能导致无限循环

示例：

new Vue({
  el: '#app',
  data() { return { count: 0 } },
  beforeUpdate() {
    console.log('beforeUpdate:', this.$el.textContent);
  },
  updated() {
    console.log('updated:', this.$el.textContent);
  }
});

4. 销毁阶段（Unmounting）

钩子函数触发时机作用
beforeDestroy实例销毁之前可以在这里做一些清理工作，如定时器、事件监听器等
destroyed实例销毁之后实例所有绑定和事件监听器已解除

示例：

const vm = new Vue({
  data() { return { count: 0 } },
  beforeDestroy() {
    console.log('beforeDestroy');
  },
  destroyed() {
    console.log('destroyed');
  }
});

vm.$destroy(); // 手动销毁

Vue 2 生命周期流程图

beforeCreate -> created -> beforeMount -> mounted
        ↑
    数据变化
        ↓
beforeUpdate -> updated
        ↓
beforeDestroy -> destroyed

三、Vue 3.x 生命周期（Composition API）

Vue 3 使用 Composition API，生命周期钩子由 setup() 中的函数来管理：

Vue 2 钩子Vue 3 钩子说明
beforeCreatesetup()（初始化阶段）数据初始化
createdsetup() 内数据可用
beforeMountonBeforeMount挂载前
mountedonMounted挂载后
beforeUpdateonBeforeUpdate更新前
updatedonUpdated更新后
beforeDestroyonBeforeUnmount卸载前
destroyedonUnmounted卸载后

示例（Vue 3）：

import { createApp, ref, onMounted, onBeforeUnmount } from 'vue';

const App = {
  setup() {
    const count = ref(0);

    onMounted(() => {
      console.log('mounted:', count.value);
    });

    onBeforeUnmount(() => {
      console.log('beforeUnmount');
    });

    return { count };
  },
  template: `<div>{{ count }}</div>`
};

createApp(App).mount('#app');

四、常用生命周期应用场景

  1. beforeCreate / created
    • 初始化数据、发起 API 请求
    • 设置全局状态管理（如 Vuex）
  2. beforeMount / mounted
    • DOM 操作（第三方库、Canvas、动画）
    • 初始化图表、地图、视频播放器等
  3. beforeUpdate / updated
    • 在数据更新前后对比 DOM 或数据变化
    • 做性能优化或记录数据变化日志
  4. beforeDestroy / destroyed
    • 清理定时器、取消事件监听
    • 取消网络请求、销毁第三方插件