生命周期钩子

在 Vue3 的组合式 API 中，生命周期钩子的使用方式与 Vue2 有所不同。Vue3 提供了一系列以 on 开头的函数来注册生命周期钩子。

常用生命周期钩子

onMounted

组件挂载完成后调用，相当于 Vue2 中的 mounted。

import { onMounted } from 'vue'

onMounted(() => {
  console.log('组件挂载完成')
  // 可以在这里执行 DOM 操作、发送请求等
})

onUpdated

组件更新完成后调用，相当于 Vue2 中的 updated。

import { onUpdated } from 'vue'

onUpdated(() => {
  console.log('组件更新完成')
  // 可以在这里执行 DOM 更新后的操作
})

onUnmounted

组件卸载前调用，相当于 Vue2 中的 beforeDestroy 和 destroyed 的组合。

import { onUnmounted } from 'vue'

onUnmounted(() => {
  console.log('组件即将卸载')
  // 可以在这里清理定时器、事件监听器等
})

onBeforeMount

组件挂载前调用，相当于 Vue2 中的 beforeMount。

import { onBeforeMount } from 'vue'

onBeforeMount(() => {
  console.log('组件即将挂载')
  // 可以在这里做一些挂载前的准备工作
})

onBeforeUpdate

组件更新前调用，相当于 Vue2 中的 beforeUpdate。

import { onBeforeUpdate } from 'vue'

onBeforeUpdate(() => {
  console.log('组件即将更新')
  // 可以在这里获取更新前的 DOM 状态
})

onErrorCaptured

捕获子组件抛出的错误时调用。

import { onErrorCaptured } from 'vue'

onErrorCaptured((error, instance, info) => {
  console.log('捕获到错误:', error)
  console.log('错误来源:', instance)
  console.log('错误信息:', info)
  // 返回 true 可以阻止错误继续向上传播
  return false
})

生命周期钩子的执行顺序

Vue3 组合式 API 中的生命周期钩子执行顺序与 Vue2 基本一致：

1. onBeforeMount - 组件挂载前
2. onMounted - 组件挂载完成
3. onBeforeUpdate - 组件更新前
4. onUpdated - 组件更新完成
5. onUnmounted - 组件卸载前

生命周期钩子与 setup 的关系

在组合式 API 中，生命周期钩子需要在 setup 函数中调用，或者在 <script setup> 标签中直接使用。

在 setup 函数中使用

import { setup, onMounted, onUnmounted } from 'vue'

export default {
  setup() {
    // 注册生命周期钩子
    onMounted(() => {
      console.log('组件挂载完成')
    })

    onUnmounted(() => {
      console.log('组件即将卸载')
    })

    return {
      // 返回组件需要的数据和方法
    }
  }
}

在 < script setup > 中使用

<script setup>
import { onMounted, onUnmounted } from 'vue'

onMounted(() => {
  console.log('组件挂载完成')
})

onUnmounted(() => {
  console.log('组件即将卸载')
})
</script>

<template>
  <div>组件内容</div>
</template>

实战示例

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const count = ref(0)
let timer = null

onMounted(() => {
  console.log('组件挂载完成')
  // 启动定时器
  timer = setInterval(() => {
    count.value++
  }, 1000)
})

onUnmounted(() => {
  console.log('组件即将卸载')
  // 清理定时器
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<template>
  <div>
    <p>当前计数: {{ count }}</p>
  </div>
</template>

生命周期钩子的使用场景

• onMounted：适合执行 DOM 操作、发送网络请求、初始化第三方库等
• onUpdated：适合处理 DOM 更新后的逻辑，如调整滚动位置等
• onUnmounted：适合清理资源，如定时器、事件监听器、WebSocket 连接等
• onErrorCaptured：适合捕获和处理子组件的错误，防止应用崩溃

通过合理使用生命周期钩子，我们可以更好地控制组件的行为，提高应用的性能和可靠性。