Glittering's blog
mamingjuan
2026-03-04
目录

Vue3 hooks 实战场景总结

# 一、响应式 Hooks —— 业务核心层

# 1️⃣ ref —— 基础状态 & 可替换值

# ✅ 实战场景

# 场景1：表单控件值

const keyword = ref('')
1

理由：

  • 基本类型
  • 需要整体替换
  • 双向绑定

# 场景2：DOM 引用

const inputRef = ref(null)

onMounted(() => {
  inputRef.value.focus()
})
1
2
3
4
5

👉 ref 在 DOM 场景是必须的

# 场景3：loading / visible 控制

const loading = ref(false)
const dialogVisible = ref(false)
1
2

所有布尔控制类，优先用 ref。

# 2️⃣ reactive —— 复杂对象状态管理

# ✅ 实战场景

# 场景1：复杂表单

const form = reactive({
  name: '',
  age: '',
  address: {
    city: ''
  }
})
1
2
3
4
5
6
7

原因：

  • 对象结构稳定
  • 需要深层响应式

# 场景2：大页面状态容器

比如：

  • 复杂筛选条件
  • 表格分页
  • 统计面板
const state = reactive({
  filter: {},
  pagination: {},
  list: []
})
1
2
3
4
5

👉 适合“状态容器式”写法。

# 3️⃣ computed —— 派生状态

# ✅ 实战场景

# 场景1：筛选数据

const filteredList = computed(() =>
  list.value.filter(item => item.name.includes(keyword.value))
)
1
2
3

优势：

  • 自动缓存
  • 避免重复计算

# 场景2：权限控制

const canEdit = computed(() =>
  userRole.value === 'admin'
)
1
2
3

👉 权限类强烈建议 computed，而不是 watch。

# 二、watch / watchEffect —— 副作用控制层

# 4️⃣ watch —— 精准监听

# ✅ 场景1：接口联动

watch(page, () => {
  fetchList()
})
1
2
3

分页变化 → 自动请求。

# ✅ 场景2：路由变化

watch(
  () => route.params.id,
  (id) => {
    fetchDetail(id)
  }
)
1
2
3
4
5
6

常用于详情页。

# ✅ 场景3：深度监听复杂对象

watch(
  () => form,
  () => saveDraft(),
  { deep: true }
)
1
2
3
4
5

适用于：

  • 自动保存草稿
  • 实时同步

# 5️⃣ watchEffect —— 自动依赖收集

# ✅ 场景1：首屏自动请求

watchEffect(() => {
  fetchDetail(route.params.id)
})
1
2
3

不用手动声明依赖。

# ✅ 场景2：日志/埋点系统

watchEffect(() => {
  trackPage(route.path)
})
1
2
3

依赖变化自动触发。

# 三、生命周期 Hooks 实战

# 6️⃣ onMounted —— 高频使用

# ✅ 场景

  • 初始化接口
  • 初始化图表
  • 注册监听
onMounted(() => {
  fetchList()
  window.addEventListener('resize', handleResize)
})
1
2
3
4

# 7️⃣ onUnmounted —— 资源释放

# ✅ 场景

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  clearInterval(timer)
})
1
2
3
4

👉 高频内存泄漏点。

# 8️⃣ onActivated / onDeactivated —— KeepAlive

# ✅ 场景：列表页缓存

onActivated(() => {
  refreshIfNeeded()
})
1
2
3

在：

  • tab页面
  • 多级缓存系统
  • 移动端多页面切换

非常常见。

# 四、组件通信 Hooks 实战

# 9️⃣ provide / inject —— 复杂组件体系

# ✅ 场景1：表单组件封装

父组件：

provide('formContext', form)
1

子组件：

const form = inject('formContext')
1

常见于：

  • 表单校验体系
  • 表单项注册机制
  • 复杂 UI 组件库封装

# ✅ 场景2：主题系统

provide('theme', themeConfig)
1

# 🔟 defineExpose —— 组件对外API

适用于：

  • 弹窗组件
  • 表单组件
  • 图表组件
defineExpose({
  open,
  close
})
1
2
3
4

父组件可通过 ref 调用。

# 五、高级场景（加分点）

# 1️⃣ watch flush 使用时机

watch(data, callback, { flush: 'post' })
1

# 使用场景：

  • 依赖 DOM 更新
  • 图表刷新
  • 需要获取更新后的尺寸

# 2️⃣ nextTick 使用场景

await nextTick()
1

# 用于：

  • 需要获取真实 DOM 尺寸
  • 操作滚动条
  • 输入框聚焦

# 3️⃣ getCurrentInstance —— 插件型开发

适用于：

  • 获取 proxy
  • 全局挂载方法
  • 框架层封装

👉 业务代码尽量少用。

# 六、企业级项目中的“组合式函数”模式（真正高级）

# 封装 useXXX hooks

例如：

function usePagination() {
  const page = ref(1)
  const pageSize = ref(10)

  return { page, pageSize }
}
1
2
3
4
5
6

在项目中你可以说：

我们把业务逻辑抽离成 useXXX hooks，形成可复用逻辑层，比如：

  • useTable
  • useForm
  • useRequest
  • usePermission
  • useResizeObserver

👉 这是高级前端标志。

# 七、你们项目中 Vue3 hooks 用得最多的是什么？

核心是 ref / reactive 做状态管理， computed 做派生数据， watch 控制副作用， onMounted 做初始化， onUnmounted 控制资源释放， 大型系统中通过封装 useXXX hooks 形成逻辑复用体系。

性能敏感场景会关注 watch 的 flush 时机以及 effect 批量更新机制。

# 八、加一段架构级

Vue3 hooks 本质是基于 effect + scheduler 构建的响应式副作用系统。 所有生命周期和 watch，本质都是 effect 的不同调度时机。

上次更新: 2026/03/04, 08:05:48
vue3的hooks基础总结
Vue3 hooks 对比

← Vue3 hooks 对比→

Copyright © 2015-2026 Glitz Ma