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-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章