ref 底层到底是怎么变成响应式的？

我给你讲 最底层、最准确、面试必对 的：

ref 底层到底是怎么变成响应式的？

我不讲废话，直接讲源码级原理 ，但用人话讲。

---

一、一句话终极底层结论（背这个）

ref 底层不是直接用 Proxy！

而是分两种情况：

1. 基本类型（string/number/boolean）
   → 用 get/set 存取器 实现响应式
2. 对象/数组类型
   → 自动调用 reactive 转成 Proxy 深度响应式

ref 的本质是一个对象，自带 .value 属性。

---

二、ref 底层结构（源码简化版）

你写：

const count = ref(0)
const user = ref({ name: 'zs' })

底层变成：

class RefImpl {
  constructor(value) {
    this._value = ??? // 关键在这里
    this.__v_isRef = true
  }

  get value() {
    // 收集依赖
    track()
    return this._value
  }

  set value(newVal) {
    this._value = ???
    // 触发更新
    trigger()
  }
}

---

三、真正的响应式实现（最核心）

1. 当 ref 传入 基本类型

const count = ref(0)

底层：

• 不使用 Proxy
• 直接用 get value() / set value() 监听
• 修改 count.value → 触发 set → 更新视图

这是基本类型的响应式原理。

---

2. 当 ref 传入 对象/数组

const user = ref({ name: 'zs' })

底层：

• 自动调用 reactive()
• 把对象变成 Proxy 深度响应式
• 所以 user.value.name 能响应式

this._value = reactive(value)

也就是说：对象 ref = reactive 套了一层 .value

---

四、一张图看懂 ref 底层

ref(基本类型)
   → get/set 监听 .value → 响应式

ref(对象/数组)
   → 自动转 reactive → Proxy → 深度响应式

---

五、超级重点结论（面试 100% 问）

1. ref 基本类型 = 存取器（get/set）实现响应式
2. ref 对象类型 = 自动调用 reactive = Proxy 响应式
3. ref 一定有 .value，因为它是对象包装
4. ref 是完整响应式，不是浅响应

---

六、面试标准答案（背这个）

问：Vue3 ref 底层是如何实现响应式的？

答：
ref 底层是一个 RefImpl 类，通过 .value 的 get/set 存取器实现响应式。
如果传入基本类型，直接监听 .value；
如果传入对象，会自动调用 reactive 并转为 Proxy 深度响应式。

---