reactive与ref的核心区别

考察点分析 link

• 核心能力维度：Vue响应式原理深度理解、API设计差异辨析、数据类型处理能力
• 技术评估点：
  1. Proxy与getter/setter实现机制差异
  2. 基本类型与引用类型响应式处理限制
  3. 自动解包特性与.value访问的必要性
  4. 引用稳定性与响应式保持能力
  5. 对象类型在两种API间的转换关系

技术解析 link

关键知识点 link

Proxy响应式代理 > getter/setter拦截 > 自动解包机制 > 引用类型包装原理

原理剖析 link

reactive() 使用Proxy代理整个对象，递归转换嵌套属性。直接操作属性触发响应，适用于引用类型数据。ref() 通过对象包装和value属性访问，利用getter/setter实现拦截，支持任意数据类型。当值为对象时，内部自动调用reactive转换。

常见误区：

1. 认为ref不能处理对象类型（实际上会自动调用reactive）
2. 在模板中错误使用.value（模板自动解包）
3. 在reactive对象中手动解包嵌套的ref

问题解答 link

根本差异：reactive基于Proxy代理对象实现响应式，ref通过对象包装的value属性存取触发响应。ref.value的设计使基本类型可通过引用传递，而Proxy无法直接代理非对象值。

必须使用ref的场景：

1. 处理字符串/数值等基本类型时（无法被Proxy代理）
2. 需要保持引用稳定性时（如需要替换整个值并保持响应）

转换示例：

  // ref对象转reactive
const countRef = ref(0)
// 自动解包：访问state.count无需.value
const state = reactive({ count: countRef })
console.log(state.count) // 0

// reactive对象转ref
const data = reactive({ a: 1 })
const dataRef = ref(data) // 等价于ref(reactive({a:1}))
console.log(dataRef.value.a) // 1
  

深度追问 link

1. 为什么模板中访问ref不用.value？
   模板编译时自动解包，仅顶层ref属性需要.value

2. 如何强制保留ref包装？
   使用shallowRef或对象包装（如{value}）避免自动解包

3. ref性能影响？
   简单类型无显著差异，嵌套对象时因reactive转换略有开销