vue 3 中 ref 应仅用于基本类型状态管理，对象用 reactive + torefs；需封装为组合式函数（如 usecounter）、避免裸露 .value；跨组件共享应通过组合式 store 或 provide/inject 实现。
Vue 3 中 ref 是管理响应式状态的基础工具，但仅用 ref(0) 或 ref({}) 写状态，容易导致逻辑散乱、复用困难、调试低效。高质量的可维护状态管理，关键不在“能不能用”，而在“怎么组织”和“怎么约束”。
明确 ref 的职责边界：基本类型优先，对象慎用
ref 天然适合包装原始值（number/string/boolean）、单个函数或轻量级配置。它语义清晰：一个 ref 就代表一个可追踪的独立状态单元。
- ✅ 推荐：用
ref管理开关（const loading = ref(false)）、计数（const step = ref(1)）、表单字段（const searchKey = ref('')） - ⚠️ 谨慎：避免
ref({ a: 1, b: [] })这类写法——它既失去reactive的深度响应优势，又多一层.value套路，读写都冗余 - ? 替代方案：对象/嵌套结构统一用
reactive，再配合toRefs暴露解构安全的属性
封装状态逻辑，而非裸露 ref 变量
直接导出 const count = ref(0) 是反模式。它把内部实现细节暴露给使用者，破坏封装性，也难以统一拦截变更、添加日志或持久化。
vue-composition-api-best-practices
Vue 3 组合式 API 与
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
最新文章