Vue3 的响应式系统源码级原始值响应式包装与类型转换原理

知识点描述
这个知识点主要讲解 Vue3 响应式系统如何处理原始值（primitive values）的响应式转换，包括字符串、数字、布尔值等非对象类型的响应式包装机制，以及在不同响应式 API 中的类型转换规则。

详细讲解

1. 原始值的响应式困境

• 原始值（string、number、boolean、symbol、bigint、null、undefined）本身不是对象，无法使用 Proxy 进行代理
• 直接对原始值使用 reactive() 会返回原始值本身，无法建立响应式关联
• 需要特殊机制将原始值"包装"成响应式对象

2. ref() 的原始值包装机制

// 源码核心实现简化版
function ref(value) {
  // 如果已经是 ref 对象，直接返回
  if (isRef(value)) return value
  
  // 创建 RefImpl 实例
  return new RefImpl(value)
}

class RefImpl {
  constructor(value) {
    this._value = isObject(value) ? reactive(value) : value
    this.dep = undefined
    this.__v_isRef = true
  }
  
  get value() {
    // 依赖收集
    trackRefValue(this)
    return this._value
  }
  
  set value(newVal) {
    // 使用 Object.is 进行值比较，避免不必要的更新
    if (!Object.is(newVal, this._value)) {
      this._value = isObject(newVal) ? reactive(newVal) : newVal
      // 触发更新
      triggerRefValue(this)
    }
  }
}

3. 类型转换的智能处理

// 类型判断工具函数
function isObject(val) {
  return val !== null && typeof val === 'object'
}

function isFunction(val) {
  return typeof val === 'function'
}

// ref 的智能类型转换逻辑
function createRef(rawValue, shallow = false) {
  if (isRef(rawValue)) return rawValue
  
  // 浅层 ref 不进行深层响应式转换
  if (shallow) {
    return new RefImpl(rawValue, true)
  }
  
  // 深层 ref：对象类型转为 reactive，原始值保持原样
  return new RefImpl(isObject(rawValue) ? reactive(rawValue) : rawValue)
}

4. 自动脱 ref 机制（unref）

// 自动脱 ref 工具函数
function unref(ref) {
  return isRef(ref) ? ref.value : ref
}

// 模板编译时的自动脱 ref 处理
// 模板中的 {{ count }} 实际上会被编译为 unref(count)
function compileTemplate(template) {
  // 编译过程中会自动处理 .value 访问
  return `with(_ctx) {
    return ${generateCodeThatAutomaticallyUnwrapsRefs(template)}
  }`
}

5. toRef() 和 toRefs() 的类型保持

// toRef：保持与源响应式对象的连接
function toRef(object, key) {
  const val = object[key]
  return isRef(val) ? val : new ObjectRefImpl(object, key)
}

class ObjectRefImpl {
  constructor(_object, _key) {
    this._object = _object
    this._key = _key
    this.__v_isRef = true
  }
  
  get value() {
    return this._object[this._key]
  }
  
  set value(newVal) {
    this._object[this._key] = newVal
  }
}

// toRefs：将响应式对象转换为普通对象，但每个属性都是 ref
function toRefs(object) {
  const ret = {}
  for (const key in object) {
    ret[key] = toRef(object, key)
  }
  return ret
}

6. 响应式 API 的类型转换规则对比

7. 实际应用场景示例

// 原始值的响应式包装
const count = ref(0) // 数字 → Ref<number>
const name = ref('Vue') // 字符串 → Ref<string>
const active = ref(true) // 布尔值 → Ref<boolean>

// 对象类型的智能处理
const objRef = ref({ count: 1 }) // 对象 → Ref<{ count: number }>
// 等价于：ref(reactive({ count: 1 }))

// 模板中的自动脱 ref
const setup = () => {
  const count = ref(0)
  return { count } // 模板中直接使用 {{ count }} 无需 .value
}

核心原理总结
Vue3 通过 ref() 机制解决了原始值的响应式问题，利用对象包装和 getter/setter 拦截实现依赖收集和更新触发。类型转换系统根据输入值的类型智能选择处理策略，确保类型安全性和开发体验的一致性。自动脱 ref 机制在模板编译阶段消除 .value 的显式使用，提升了开发便利性。