【vue高频面试题】第8题：Vue3 的生命周期有哪些？和 Vue2 的生命周期有哪些区别？setup 中生命周期怎么写？

Vue3 高频题 · 第 8 题

主问题

问：Vue3 的生命周期有哪些？和 Vue2 的生命周期有哪些区别？setup 中生命周期怎么写？

---

一、标准回答（面试官期待你说到的核心点）

Vue3 生命周期主要分两类：

---

① Options API 生命周期（和 Vue2 类似）

Vue3 仍然支持原有生命周期：

• beforeCreate（废弃 — 被 setup 取代）
• created（废弃 — 被 setup 取代）
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeUnmount（Vue2 叫 beforeDestroy）
• unmounted（Vue2 叫 destroyed）

---

② Composition API（setup 内）生命周期写法

Vue2	Vue3 Options API	Vue3 Composition 写法（setup）
beforeCreate	—（由 setup 替代）	setup() 最开始执行
created	—（由 setup 替代）	setup() 中执行
beforeMount	beforeMount	onBeforeMount
mounted	mounted	onMounted
beforeUpdate	beforeUpdate	onBeforeUpdate
updated	updated	onUpdated
beforeDestroy	beforeUnmount	onBeforeUnmount
destroyed	unmounted	onUnmounted
activated	activated	onActivated
deactivated	deactivated	onDeactivated
errorCaptured	errorCaptured	onErrorCaptured

---

二、为什么 Vue3 不再推荐 beforeCreate / created？

因为 setup 就是它们的替代品：

• 变量在 setup 中初始化
• computed / watch 全在 setup 中声明
• props、emit 都在 setup 中解析

本质上：

Vue3 把 beforeCreate / created 两个阶段合并到了 setup。

---

三、代码示例（Composition API）

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

console.log('setup -> 等价 created & beforeCreate')

onBeforeMount(() => {
  console.log('组件即将挂载')
})

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

onBeforeUpdate(() => {
  console.log('数据更新前')
})

onUpdated(() => {
  console.log('数据更新后')
})

onBeforeUnmount(() => {
  console.log('组件卸载前')
})

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

---

四、深挖追问（面试官常用）

---

追问 1：setup 的执行时机是什么？

答：在 beforeCreate 和 created 之间执行。

更准确：

• props 已解析
• 组件实例未创建（this 还不可用）
• 数据尚未挂载 DOM

---

追问 2：为什么在 setup 里不能用 this？

因为组件实例还没创建。

所以：

• this = undefined
• methods、data 都不存在

---

追问 3：setup 中拿不到 DOM 怎么处理？

用 onMounted。

onMounted(() => {
  console.log('now you can access DOM')
})

---

追问 4：watch 在 setup 中监听 props 会不会有值？

有！

props 已经解析完毕才会进入 setup。

---

追问 5：onMounted 会触发几次？什么时候触发？

组件挂载后触发 1 次。
组件 keep-alive 时不会重复执行。

如果你想检测 keep-alive 恢复：

onActivated(() => {
  console.log('页面返回时执行')
})

---

五、Vue3 新增 / 改名生命周期

新生命周期	用途
onBeforeUnmount	替代 beforeDestroy
onUnmounted	替代 destroyed
onActivated	keep-alive 激活
onDeactivated	keep-alive 失活
onRenderTracked	响应式依赖被追踪时触发
onRenderTriggered	响应式引起重新渲染时触发

最后两个用于性能调试，高级面试常问。

---

六、killer 问题（高级面试官提问）

---

❓ “setup 的执行顺序相对于父子组件是什么样？（高频坑题）”

答：

1. 父 setup()
2. 子 setup()
3. 子 onMounted
4. 父 onMounted

规则：setup 按树结构先父后子，mounted 按渲染结构先子后父。

---

❓ “Vue3 的生命周期为什么用函数而不是对象写法？”

因为：

• Composition API 支持多次调用同一个生命周期（更灵活）
• 更适合 tree-shaking
• 可以封装成 hooks（Composable）

示例：

onMounted(() => loadData())
onMounted(() => initCharts())

Options API 的 mounted 只能写一个。

---

七、最终总结（1 分钟背诵版）

Vue3 生命周期分为：

• Options API（兼容 Vue2）
• Composition API（setup 写法）

setup 替代 beforeCreate & created。
Composition API 使用 onXxx 系列函数，支持多次调用，更灵活。
生命周期执行顺序明确：setup 先父后子，mounted 先子后父。