1. ref：全能型选手

• 定义：主要用于定义基本类型（String, Number, Boolean 等），也可以定义引用类型。

• 本质：通过对原始值进行包装，生成一个具有 .value 属性的对象。对于引用类型，ref 内部会自动调用 reactive 来处理。

• 访问控制：

  • 在 JS 中必须通过 .value 访问；

  • 在 <template> 模板中，Vue 会自动解包，直接写变量名即可，无需加 .value。

2. reactive：对象专家

• 定义：专门用于定义引用类型（Object, Array, Map, Set）。

• 本质：基于 ES6 Proxy 实现，直接代理整个对象。

• 访问控制：像操作普通原生对象一样直接访问属性，无需 .value。

使用 ref 的场景：

1. 基本类型数据：计数器、开关状态、输入框的值。

2. 需要重置的数据：例如从后端获取列表后，直接 list.value = res.data。

3. 简单组件逻辑：代码更清晰，.value 提醒这是一个响应式变量。

使用 reactive 的场景：

1. 复杂业务模型：包含多个相互关联属性的大对象（如用户信息、表单整组数据）。

2. 追求原生感：不希望在逻辑代码中到处看到 .value。

3. 聚合数据：将一类变量聚合在一个对象中管理，减少变量声明。