普通属性 vs ref 包装属性

看个例子：

1. 响应式机制

• 普通属性：没有响应式能力
• ref 属性：具有响应式能力，值变化时会触发依赖更新

2. 访问方式

• 普通属性：直接访问，如 this.count
• ref 属性：在 JavaScript 中需要通过 .value 访问，如 count.value；在模板中可以直接访问

3. 使用场景

• 普通属性：适用于不需要响应式的简单数据
• ref 属性：适用于需要响应式的状态、计算属性返回值、组件间通信等

生活化比喻

想象你在管理一个仓库：

普通属性

• 相当于：仓库里的静态库存记录
  • 只记录当前状态，不会自动更新
  • 如果你修改了实际库存，记录不会同步变化
  • 需要手动更新记录

ref 属性

• 相当于：仓库的电子库存系统
  • 实时跟踪库存变化
  • 当实际库存变化时，系统会自动更新显示
  • 可以设置触发器，当库存低于阈值时自动提醒

在 Vue 3 的组合式 API 中，大多数情况下应该优先使用 ref 属性，因为它们提供了响应式能力，这是 Vue 框架的核心优势。只有在明确不需要响应式的情况下，才使用普通属性。