vue3的hooks基础总结
# 一、Vue3 常用 Composition API Hooks
Vue3 核心是 Composition API，逻辑复用围绕 setup() 展开。
# 1️⃣ 响应式相关
# ① ref
创建基本类型响应式数据。
const count = ref(0)
1
特点：
- 访问用
.value - 模板中自动解包
适用场景：
- 基本类型
- 需要替换整个值
# ② reactive
创建对象响应式。
const state = reactive({ name: 'vue' })
1
特点：
- 不能直接解构（会丢失响应式）
- 适合复杂对象
# ③ computed
计算属性。
const total = computed(() => count.value * 2)
1
特点：
- 缓存
- 依赖追踪
- 支持 getter / setter
# ④ watch
监听数据变化。
watch(count, (newVal, oldVal) => {})
1
高级用法：
watch(
() => state.name,
(val) => {},
{ immediate: true, deep: true }
)
1
2
3
4
5
2
3
4
5
常见参数：
- immediate
- deep
- flush: 'post' | 'pre' | 'sync'
# ⑤ watchEffect
自动收集依赖。
watchEffect(() => {
console.log(count.value)
})
1
2
3
2
3
区别：
| watch | watchEffect |
|---|---|
| 手动指定依赖 | 自动收集依赖 |
| 可拿到 oldValue | 不可 |
适合副作用场景。
# 2️⃣ 生命周期 Hooks
Vue3 生命周期必须在 setup() 中使用。
# 挂载阶段
| Vue3 | 说明 |
|---|---|
onBeforeMount | 挂载前 |
onMounted | 挂载后 |
onMounted(() => {
console.log('DOM ready')
})
1
2
3
2
3
# 更新阶段
| Vue3 | 说明 |
|---|---|
onBeforeUpdate | 更新前 |
onUpdated | 更新后 |
# 卸载阶段
| Vue3 | 说明 |
|---|---|
onBeforeUnmount | 卸载前 |
onUnmounted | 卸载后 |
常用于：
- 清除定时器
- 取消监听
- 释放资源
# 错误捕获
onErrorCaptured((err, instance, info) => {})
1
类似 React 的 ErrorBoundary。
# KeepAlive 相关
| Hook | 说明 |
|---|---|
onActivated | 激活 |
onDeactivated | 失活 |
适用于：
- 页面缓存恢复
- 刷新数据
# 3️⃣ 组件通信 Hooks
# defineProps
const props = defineProps({
msg: String
})
1
2
3
2
3
# defineEmits
const emit = defineEmits(['change'])
1
# defineExpose
暴露给父组件。
# provide / inject
跨层级通信。
provide('key', value)
inject('key')
1
2
2
适合：
- 表单组件
- 主题系统
- 插件机制
# 4️⃣ 其他高频 Hooks
# ① nextTick
DOM 更新后执行。
await nextTick()
1
# ② useAttrs
获取透传属性。
# ③ useSlots
获取插槽。
# ④ getCurrentInstance
获取组件实例（高级场景用）。
# 二、Vue3 生命周期整体流程
Vue3 生命周期流程：
setup
↓
onBeforeMount
↓
onMounted
↓
onBeforeUpdate
↓
onUpdated
↓
onBeforeUnmount
↓
onUnmounted
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
# 三、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' // 同步执行
1
2
3
2
3
高级场景：
- 操作 DOM → 用 post
- 做同步逻辑 → sync
# 3️⃣ setup 执行时机
- 在组件实例创建时执行
- 比 onBeforeMount 更早
- 无 this
# 五、实战经验型总结
- 核心是 ref / reactive / computed / watch。
- 副作用控制多用 watchEffect。
- 异步请求通常在 onMounted。
- 大量组件缓存场景用 onActivated。
- 复杂表单封装大量使用 provide/inject。
- 性能优化时会关注 watch flush 和 nextTick 的使用时机。
上次更新: 2026/03/04, 08:05:48