ref 是 Vue 3 自定义 Hook 返回响应式数据的首选方式，因其解构不丢失响应性、语义清晰且天然支持生命周期管理与跨组件 ref 传递。
在 Vue 3 中，ref 是自定义 Hook 返回响应式数据最常用、最直接的方式。它让 Hook 内部的状态天然具备响应性，且调用方解构使用后仍保持响应式连接，无需额外处理。
ref 是 Hook 返回数据的默认载体
自定义 Hook 本质是函数，返回值需暴露可读写、可响应的数据和操作方法。ref 天然满足这两点：它的 .value 可读可写，且整个 ref 对象被 Vue 的响应式系统追踪。
- Hook 内部用
const data = ref(null)声明状态 - 通过
return { data, loading, fetchData }直接导出 ref 实例 - 组件中解构后：
{{ data }}模板里自动响应，data.value = ...可修改
避免 reactive 对象解构丢失响应性
如果 Hook 内部用 reactive 创建对象（比如 const state = reactive({ data: null, loading: false })），直接 return state 后在组件中解构（如 const { data } = useXxx()）会导致 data 失去响应性——这是常见陷阱。
此时有两种稳妥做法：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
立即学习“前端免费学习笔记（深入）”；
-
推荐用 ref 替代：对单个字段或简单结构，优先用多个
ref，语义清晰、解构安全 -
必须用 reactive 时配合 toRefs：
return { ...toRefs(state) }，把 reactive 的每个属性转为 ref，解构后仍响应
结合生命周期管理 ref 状态
ref 常与 onMounted、onUnmounted 配合，在 Hook 内完成初始化和清理，确保状态生命周期可控。
- 例如窗口尺寸 Hook：用
const width = ref(0)，onMounted添加 resize 监听，onUnmounted移除 - 数据请求 Hook：用
const loading = ref(false)，在fetchData中控制开关 - 所有 ref 状态都在 Hook 内部闭环管理，组件只消费，不干预细节
父组件通过 ref 获取子组件 expose 的 ref 数据
当自定义 Hook 在子组件中使用，并通过 defineExpose 暴露 ref 状态时，父组件可用模板 ref 接收并访问其值。
- 子组件 setup 中：
const count = ref(0); defineExpose({ count }) - 父组件：
<Child ref="childRef" />→childRef.value.count.value读取 - 注意层级：子组件暴露的是 ref 实例，父组件拿到后仍需访问
.value
