标准答案
- Vue 2 常见生命周期包括 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
- Vue 3 Options API 仍然支持大部分同名钩子，但销毁相关钩子改名为 beforeUnmount 和 unmounted。
- Composition API 中，setup 在组件实例创建早期执行，早于 mounted，适合声明响应式状态、计算属性、方法、watch 和组合式函数。
- mounted 对应 onMounted，updated 对应 onUpdated，beforeUnmount / unmounted 对应 onBeforeUnmount / onUnmounted。
- created 里的大多数初始化逻辑，在 Vue 3 setup 中直接执行即可；依赖真实 DOM 的逻辑放到 onMounted；定时器、监听器和外部订阅在 onUnmounted 中清理。
题目解析
生命周期题要按阶段讲：创建阶段拿数据和初始化状态，挂载阶段能访问 DOM，更新阶段响应渲染变化，卸载阶段清理副作用。
setup 不是 mounted 的替代。setup 执行时 DOM 还没有挂载，模板 ref 还不可用。
Vue 3 组合式生命周期必须在 setup 同步执行期间注册。异步回调里再注册生命周期，通常已经错过当前组件实例上下文。
代码示例
同一段初始化、挂载和卸载逻辑，在 Vue 2 Options API 和 Vue 3 Composition API 中可以这样对应。
Vue
<!-- Vue 2 -->
<script>
export default {
data() {
return { count: 0 }
},
created() {
this.count = 1
},
mounted() {
window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
},
methods: {
handleResize() {}
}
}
</script>Vue
<!-- Vue 3 -->
<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue'
const count = ref(1)
function handleResize() {}
onMounted(() => {
window.addEventListener('resize', handleResize)
})
onUnmounted(() => {
window.removeEventListener('resize', handleResize)
})
</script>常见误区
- 把 setup 当成 mounted，直接读取还没有挂载的 DOM。
- 迁移 Vue 2 代码时继续写 beforeDestroy / destroyed，忽略 Vue 3 中对应的是 beforeUnmount / unmounted。
- 注册事件监听、定时器或外部订阅后，没有在卸载阶段清理。