Vue3 生命周期

生命周期对比

Options API	Composition API	说明
beforeCreate	setup()	组件创建前
created	setup()	组件创建后
beforeMount	onBeforeMount	挂载前
mounted	onMounted	挂载后
beforeUpdate	onBeforeUpdate	更新前
updated	onUpdated	更新后
beforeUnmount	onBeforeUnmount	卸载前
unmounted	onUnmounted	卸载后
errorCaptured	onErrorCaptured	错误捕获
renderTracked	onRenderTracked	渲染追踪
renderTriggered	onRenderTriggered	渲染触发
activated	onActivated	keep-alive 激活
deactivated	onDeactivated	keep-alive 停用

Composition API 生命周期

<script setup>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  onErrorCaptured
} from 'vue'

onBeforeMount(() => {
  console.log('Before Mount')
})

onMounted(() => {
  console.log('Mounted')
  // DOM 操作
})

onBeforeUpdate(() => {
  console.log('Before Update')
})

onUpdated(() => {
  console.log('Updated')
})

onBeforeUnmount(() => {
  console.log('Before Unmount')
  // 清理工作
})

onUnmounted(() => {
  console.log('Unmounted')
})

onActivated(() => {
  console.log('Activated')
})

onDeactivated(() => {
  console.log('Deactivated')
})

onErrorCaptured((err, instance, info) => {
  console.log('Error Captured', err)
  return false // 阻止错误继续传播
})
</script>

实际应用

API 调用

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

const data = ref(null)

onMounted(async () => {
  const response = await fetch('/api/data')
  data.value = await response.json()
})
</script>

DOM 操作

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

const inputRef = ref(null)

onMounted(() => {
  inputRef.value.focus()
})
</script>

<template>
  <input ref="inputRef" />
</template>

定时器管理

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

let timer

onMounted(() => {
  timer = setInterval(() => {
    console.log('tick')
  }, 1000)
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

事件监听

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

const handleResize = () => {
  console.log('window resized')
}

onMounted(() => {
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
})
</script>

父子组件生命周期顺序

加载渲染

父 setup
父 onBeforeMount
子 setup
子 onBeforeMount
子 onMounted
父 onMounted

更新

父 onBeforeUpdate
子 onBeforeUpdate
子 onUpdated
父 onUpdated

卸载

父 onBeforeUnmount
子 onBeforeUnmount
子 onUnmounted
父 onUnmounted