组件生命周期方法

分类	Composition API（Vue3）	Options API（Vue3）	Options API（Vue2）
创建	无	beforeCreate() v3.0	beforeCreate() v2.0
-	无	created() v3.0	created() v2.0
挂载	onBeforeMount() v3.0	beforeMount() v3.0	beforeMount() v2.0
-	onRenderTracked() - DEV v3.0	renderTracked() - DEV v3.0	无
-	onMounted() v3.0	mounted() v3.0	mounted() v2.0
更新	onRenderTriggered() - DEV v3.0	renderTriggered() - DEV v3.0	无
-	onBeforeUpdate() v3.0	beforeUpdate() v3.0	beforeUpdate() v2.0
-	onDeactivated() v3.0	deactivated() v3.0	deactivated() v2.0
-	onActivated() v3.0	activated() v3.0	activated() v2.0
-	onUpdated() v3.0	updated() v3.0	updated() v2.0
卸载	onBeforeUnmount() v3.0	beforeUnmount() v3.0	beforeDestroy() v2.0
-	onUnmounted() v3.0	unmounted() v3.0	destroyed() v2.0
错误捕获	onErrorCaptured() v3.0	errorCaptured() v3.0	errorCaptured() v2.5
SSR	onServerPrefetch() v3.0	serverPrefetch() v3.0	无

大纲

• 生命周期钩子函数
  • 调用顺序
    • 嵌套组件生命周期调用顺序
• 生命周期图示

生命周期钩子函数

Composition API

<script step lang="ts">
import { 
  onBeforeMount,
  onRenderTracked,
  onMounted,

  onRenderTriggered,
  onBeforeUpdate,
  onDeactivated,
  onActivated,
  onUpdated,

  onBeforeUnmount,
  onUnmounted,
  onErrorCaptured,
  onServerPrefetch,
 } form 'vue';

  // 组件注册
  // ============
  // 自动注册，自动命名

  // 生命周期钩子函数
  // ============
  // 挂载
  onBeforeMount(() => {}); // 挂载之前，render 函数首次被调用
  onRenderTracked((e: DebuggerHook) => {}); // 开发模式，执行N次
  onMounted(() => {}); // 当前组件 DOM 已准备完成，

  // 更新
  onRenderTriggered((e: DebuggerHook) => {}); // 开发模式，执行1次
  onBeforeUpdate(() => {}); // 数据发生改变后，DOM 更新之前调用
  //  onRenderTracked((e: DebuggerHook) => {}); // 开发模式，执行N-1次
  onDeactivated(() => {}); // 被 keep-alive 缓存的组件 失活时 调用
  onActivated(() => {}); // 被 keep-alive 缓存的组件 激活时 调用
  onUpdated(() => {}); // 当前组件 DOM 已更新完成，

  // 卸载
  onBeforeUnmount(() => {}); // 销毁（卸载）前调用
  onUnmounted(() => {}); // 销毁（卸载）后调用

  // 错误捕获
  onErrorCaptured((callback: ErrorCapturedHook) => {
    // return ?boolean;
  });

  // 服务端渲染
  onServerPrefetch(() => Promise<any>)
</script>

Options API

<script lang="ts">
export default {
  // 组件注册
  // ============
  // 手动声明注册，命名

  // 生命周期钩子函数
  // ============
  // 实例
  beforeCreate(this: ComponentPublicInstance) {}, // 初始化后
  created(this: ComponentPublicInstance) {}, // 创建完成后，数据侦听、计算属性、方法、事件/侦听器回调 等配置完成
  // 挂载
  beforeMount(this: ComponentPublicInstance) {}, // 挂载之前，render 函数首次被调用
  renderTracked(this: ComponentPublicInstance, e: DebuggerEvent) {}, // 开发模式，执行N次
  mounted(this: ComponentPublicInstance) {}, // 挂载完成，当前组件 DOM 已准备完成，this.$nextTick() 可保证所有子组件的 DOM 也挂载完成

  // 更新
  renderTriggered(this: ComponentPublicInstance, e: DebuggerEvent) {}, // 开发模式，执行1次
  beforeUpdate(this: ComponentPublicInstance) {}, // 数据发生改变后，DOM 更新之前
  // renderTracked(this: ComponentPublicInstance, e: DebuggerEvent) {},  // 开发模式，执行N-1次
  deactivated(this: ComponentPublicInstance) {},  // 被 keep-alive 缓存的组件 失活时 调用
  activated(this: ComponentPublicInstance) {}, // 被 keep-alive 缓存的组件 激活时 调用
  updated(this: ComponentPublicInstance) {}, // 当前组件 DOM 已更新完成，this.$nextTick() 可保证所有子组件的 DOM 也更新完成。状态改变请使用 computed 或 watcher 

  // 卸载，Vue3 Options
  beforeUnmount(this: ComponentPublicInstance) {}, // 销毁（卸载）前调用
  unmounted(this: ComponentPublicInstance) {}, // 销毁（卸载）后调用，指令、事件监听器及子实例都将被销毁
  // 销毁，Vue2 Options
  // beforeDestroy() {}, // 销毁前调用
  // destroyed() {}, // 销毁后调用，指令、事件监听器及子实例都将被销毁

  // 错误捕获
  // 捕获来自后代组件的错误，返回 false 可以阻止错误继续向上传播
  errorCaptured(this: ComponentPublicInstance, err: unknown, instance: ComponentPublicInstance | null, info: string) {
    // return ?boolean;
  }

  // 服务端渲染 Vue3 Options
  serverPrefetch(this: ComponentPublicInstance) {
    // return Promise<any>;
  }

}
</script>

调用顺序

嵌套组件生命周期钩子函数调用顺序：

• 挂载/卸载 前（Before*）：从外向内 依次执行
  • beforeCreate(外) -> created(外) ->
  • onBeforeMount(外) -> onBeforeMount(中) -> onBeforeMount(内)
  • onBeforeUnmount(外) -> onBeforeUnmount(中) -> onBeforeUnmount(内)
• 挂载/卸载 后（*ed）及 激活/失活：从内向外 依次执行
  • onMounted(内) -> onMounted(中) -> onMounted(外)
  • onUnmounted(内) -> onUnmounted(中) -> onUnmounted(外)
  • onActivated(内) -> onActivated(中) -> onActivated(外)
  • onDeactivated(内) -> onDeactivated(中) -> onDeactivated(外)

生命周期图示

参考

• https://vuejs.org/api/composition-api-lifecycle.html
• https://vuejs.org/api/options-lifecycle.html
• https://v2.cn.vuejs.org/v2/api/?#选项-生命周期钩子