Vue 3 的生命周期钩子函数是 Vue 组件在创建、更新和销毁过程中触发的一系列回调函数。通过这些钩子函数，开发者可以在特定的阶段执行自定义逻辑。Vue 3 的生命周期与 Vue 2 类似，但有一些细微的变化和新增的 Composition API 钩子。

以下是 Vue 3 的生命周期钩子函数及其执行顺序的详细说明：

1. ‌Vue 3 生命周期

以下是 Vue 3 生命周期的执行顺序：

1.1初始化阶段‌

setup()：Composition API 的入口函数，在组件创建之前执行。

beforeCreate：组件实例初始化之前触发。

created：组件实例初始化完成，数据观测和事件配置已完成。

1.2挂载阶段‌

beforeMount：组件挂载到 DOM 之前触发。

mounted：组件挂载到 DOM 后触发。

1.3更新阶段‌

beforeUpdate：组件数据更新，DOM 重新渲染之前触发。

updated：组件数据更新，DOM 重新渲染后触发。

1.4卸载阶段‌

beforeUnmount：组件卸载之前触发。

unmounted：组件卸载后触发。

1.5其他钩子‌

errorCaptured：捕获子组件或子孙组件的错误。

renderTracked（开发模式）：跟踪组件的渲染依赖。

renderTriggered（开发模式）：触发组件重新渲染时调用。

2. ‌生命周期钩子详解‌

2.1初始化阶段‌

2.1.1setup()‌

Composition API 的入口函数，在 beforeCreate 之前执行。

用于定义响应式数据、计算属性、方法等。

import { ref } from 'vue';
export default {
  setup() {
    const count = ref(0);
    return { count };
  }
};

2.1.2beforeCreate‌

组件实例初始化之前触发。

此时组件的 data、methods 等还未初始化。

export default {
  beforeCreate() {
    console.log('beforeCreate');
  }
};

2.1.3created‌

组件实例初始化完成，数据观测和事件配置已完成。

此时可以访问 data、methods 等。

export default {
  created() {
    console.log('created');
  }
};

2.2挂载阶段‌

2.2.1beforeMount‌

组件挂载到 DOM 之前触发。

此时模板已经编译，但尚未渲染到 DOM。

export default {
  beforeMount() {
    console.log('beforeMount');
  }
};

2.2.2mounted‌

组件挂载到 DOM 后触发。

此时可以访问 DOM 元素。

export default {
  mounted() {
    console.log('mounted');
  }
};

2.3更新阶段‌

2.3.1beforeUpdate‌

组件数据更新，DOM 重新渲染之前触发。

适合在更新前访问现有的 DOM。

export default {
  beforeUpdate() {
    console.log('beforeUpdate');
  }
};

2.3.2updated‌

组件数据更新，DOM 重新渲染后触发。

适合在更新后操作 DOM。

export default {
  updated() {
    console.log('updated');
  }
};

2.4卸载阶段‌

2.4.1beforeUnmount‌

组件卸载之前触发。

适合清理定时器、取消订阅等操作。

export default {
  beforeUnmount() {
    console.log('beforeUnmount');
  }
};

2.4.2unmounted‌

组件卸载后触发。

此时组件实例已被销毁。

export default {
  unmounted() {
    console.log('unmounted');
  }
};

2.5其他钩子‌

2.5.1errorCaptured‌

捕获子组件或子孙组件的错误。

可以阻止错误继续向上传播。

export default {
  errorCaptured(err, instance, info) {
    console.error('Error captured:', err);
    return false; // 阻止错误继续向上传播
  }
};

2.5.2renderTracked 和 renderTriggered‌

用于开发调试，分别用于跟踪渲染依赖和触发重新渲染。

export default {
  renderTracked(e) {
    console.log('renderTracked', e);
  },
  renderTriggered(e) {
    console.log('renderTriggered', e);
  }
};

3. ‌Composition API 的生命周期钩子‌

在 Composition API 中，生命周期钩子通过 onXxx 函数来使用：

import { onMounted, onUpdated, onUnmounted } from 'vue';
export default {
  setup() {
    onMounted(() => {
      console.log('mounted');
    });
    onUpdated(() => {
      console.log('updated');
    });
    onUnmounted(() => {
      console.log('unmounted');
    });
  }
};

4. ‌生命周期钩子的应用场景‌

created / onMounted‌：发起网络请求，初始化数据。

beforeUnmount / onUnmounted‌：清理定时器、取消事件监听。

errorCaptured‌：捕获并处理组件错误。

beforeUpdate / updated‌：在数据更新前后执行特定逻辑。

5. ‌总结‌

Vue 3 的生命周期钩子函数为开发者提供了在组件不同阶段执行逻辑的能力。通过合理使用这些钩子，可以更好地控制组件的初始化、更新和销毁过程。在 Composition API 中，生命周期钩子更加灵活，适合在 setup() 中使用。