一、Vue3 常用 Composition API Hooks

Vue3 核心是 Composition API，逻辑复用围绕 setup() 展开。

1️⃣ 响应式相关

① ref

创建基本类型响应式数据。

const count = ref(0)

特点：

• 访问用 .value
• 模板中自动解包

适用场景：

• 基本类型
• 需要替换整个值

② reactive

创建对象响应式。

const state = reactive({ name: 'vue' })

特点：

• 不能直接解构（会丢失响应式）
• 适合复杂对象

③ computed

计算属性。

const total = computed(() => count.value * 2)

特点：

• 缓存
• 依赖追踪
• 支持 getter / setter

④ watch

监听数据变化。

watch(count, (newVal, oldVal) => {})

高级用法：

watch(
  () => state.name,
  (val) => {},
  { immediate: true, deep: true }
)

常见参数：

• immediate
• deep
• flush: 'post' | 'pre' | 'sync'

⑤ watchEffect

自动收集依赖。

watchEffect(() => {
  console.log(count.value)
})

区别：

watch	watchEffect
手动指定依赖	自动收集依赖
可拿到 oldValue	不可

适合副作用场景。

2️⃣ 生命周期 Hooks

Vue3 生命周期必须在 setup() 中使用。

挂载阶段

Vue3	说明
onBeforeMount	挂载前
onMounted	挂载后

onMounted(() => {
  console.log('DOM ready')
})

更新阶段

Vue3	说明
onBeforeUpdate	更新前
onUpdated	更新后

卸载阶段

Vue3	说明
onBeforeUnmount	卸载前
onUnmounted	卸载后

常用于：

• 清除定时器
• 取消监听
• 释放资源

错误捕获

onErrorCaptured((err, instance, info) => {})

类似 React 的 ErrorBoundary。

KeepAlive 相关

Hook	说明
onActivated	激活
onDeactivated	失活

适用于：

• 页面缓存恢复
• 刷新数据

3️⃣ 组件通信 Hooks

defineProps

const props = defineProps({
  msg: String
})

defineEmits

const emit = defineEmits(['change'])

defineExpose

暴露给父组件。

provide / inject

跨层级通信。

provide('key', value)
inject('key')

适合：

• 表单组件
• 主题系统
• 插件机制

4️⃣ 其他高频 Hooks

① nextTick

DOM 更新后执行。

await nextTick()

② useAttrs

获取透传属性。

③ useSlots

获取插槽。

④ getCurrentInstance

获取组件实例（高级场景用）。

二、Vue3 生命周期整体流程

Vue3 生命周期流程：

setup
↓
onBeforeMount
↓
onMounted
↓
onBeforeUpdate
↓
onUpdated
↓
onBeforeUnmount
↓
onUnmounted

三、Vue2 vs Vue3 生命周期对比（面试高频）

Vue2	Vue3
beforeCreate	setup
created	setup
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

重点：

• 👉 Vue3 没有 created
• 👉 setup 替代 beforeCreate + created

四、高级回答加分点

1️⃣ 生命周期执行时机本质

本质是基于：

• effect
• scheduler
• job queue

Vue3 更新机制：

• 组件更新是异步批处理
• 基于微任务队列

2️⃣ watch flush 时机

flush: 'pre'   // 默认，DOM更新前
flush: 'post'  // DOM更新后
flush: 'sync'  // 同步执行

高级场景：

• 操作 DOM → 用 post
• 做同步逻辑 → sync

3️⃣ setup 执行时机

• 在组件实例创建时执行
• 比 onBeforeMount 更早
• 无 this

五、实战经验型总结

• 核心是 ref / reactive / computed / watch。
• 副作用控制多用 watchEffect。
• 异步请求通常在 onMounted。
• 大量组件缓存场景用 onActivated。
• 复杂表单封装大量使用 provide/inject。
• 性能优化时会关注 watch flush 和 nextTick 的使用时机。