解释 Vue 3 源码中 `ref` 类型转换的内部逻辑，特别是当 `ref` 接收到 `reactive` 对象时的行为 (`toRaw` 的作用)。

咳咳，各位观众老爷，晚上好！今天咱们聊点硬核的，扒一扒 Vue 3 源码里 ref 这个小妖精的类型转换机制，重点说说它遇到 reactive 对象时，是怎么耍脾气的，以及 toRaw 这个老实人是怎么收拾它的。准备好了吗？发车啦！

一、ref：Vue 3 世界里的“引用”

首先，得搞清楚 ref 是个啥。简单来说，ref 是 Vue 3 提供的一种创建响应式数据的方式。你可以把它理解成一个“引用”，指向一个值，当这个值发生变化时，Vue 3 会自动更新视图。

import { ref } from 'vue';

const count = ref(0);

console.log(count.value); // 输出 0

count.value++;

console.log(count.value); // 输出 1 (视图也会更新)

上面的代码里，count 就是一个 ref 对象，它指向的值是 0。注意访问和修改ref的值需要通过 .value。

二、ref 的类型转换：一个百变星君

ref 厉害的地方在于它的类型转换能力。它可以接受各种类型的值，包括原始类型（数字、字符串、布尔值等）、对象、数组，甚至另一个 reactive 对象。

当 ref 接收到不同类型的值时，它会进行不同的处理：

三、ref 遇到 reactive：一场“剥皮”大戏

好戏开场了！当 ref 接收到一个 reactive 对象时，它不会直接把这个 reactive 对象包装起来，而是会先用 toRaw 把它的响应式特性剥掉，然后再包装。这是为什么呢？

这就涉及到 Vue 3 的响应式系统设计了。如果直接把 reactive 对象放进 ref 里，会出现以下问题：

双重代理： reactive 对象本身已经是一个代理对象了，再把它放进 ref 里，就相当于套了两层代理。这会增加内存开销和性能损耗。
响应式混乱： reactive 对象会追踪自身的依赖，ref 对象也会追踪自身的依赖。如果直接把 reactive 对象放进去，会导致依赖追踪混乱，难以控制更新。

所以，Vue 3 选择了更聪明的方式：用 toRaw 把 reactive 对象的响应式特性剥掉，得到一个纯粹的 JavaScript 对象，然后再把它放进 ref 里。这样，ref 只需要追踪这个纯粹对象的引用，就可以控制更新了。

举个例子：

import { ref, reactive, toRaw } from 'vue';

const reactiveObject = reactive({ name: '张三', age: 18 });

const myRef = ref(reactiveObject);

console.log(myRef.value); // 输出 { name: '张三', age: 18 } (但不是响应式的)

reactiveObject.age = 20; // 修改 reactiveObject 的 age

console.log(myRef.value.age); // 输出 18 (myRef.value 没有更新，因为它是 toRaw 后的结果)

在这个例子中，myRef.value 指向的是 reactiveObject 的一个非响应式的副本，所以修改 reactiveObject 的 age 不会影响 myRef.value 的值。

四、toRaw：一个默默奉献的老黄牛

toRaw 的作用很简单，就是把一个 reactive 对象或 readonly 对象还原成原始的 JavaScript 对象。它会递归地遍历对象的所有属性，把所有代理对象都还原成原始对象。

import { reactive, toRaw } from 'vue';

const reactiveObject = reactive({ name: '张三', age: 18, address: { city: '北京' } });

const rawObject = toRaw(reactiveObject);

console.log(rawObject); // 输出 { name: '张三', age: 18, address: { city: '北京' } } (所有属性都是非响应式的)

reactiveObject.age = 20; // 修改 reactiveObject 的 age

console.log(rawObject.age); // 输出 18 (rawObject 没有更新)

在这个例子中，rawObject 是 reactiveObject 的一个非响应式的副本，所以修改 reactiveObject 的 age 不会影响 rawObject 的值。

五、ref 源码分析：见证奇迹的时刻

为了更深入地理解 ref 的类型转换机制，咱们来扒一下 Vue 3 的源码。ref 的实现位于 packages/reactivity/src/ref.ts 文件中。

import {
  isObject,
  hasChanged,
  isArray,
  def,
  isFunction
} from '@vue/shared'
import {
  isTracking,
  trackEffects,
  triggerEffects,
  pauseTracking,
  resetTracking
} from './effect'
import { toReactive, toRaw } from './reactive'
import { ReactiveFlags, toReadonly } from './constants'
import { Dep } from './dep'

export interface Ref<T = any> {
  value: T
}

export function ref<T>(value: T): Ref<T>
export function ref<T = any>(): Ref<T | undefined>
export function ref(value?: unknown) {
  return createRef(value)
}

function createRef(rawValue: unknown, shallow = false) {
  if (isRef(rawValue)) {
    return rawValue
  }
  return new RefImpl(rawValue, shallow)
}

export function isRef(r: any): r is Ref {
  return !!(r && r.__v_isRef === true)
}

class RefImpl<T> {
  private _value: T
  private _rawValue: T

  public dep?: Dep = undefined
  public readonly __v_isRef = true

  constructor(value: T, public readonly __v_isShallow: boolean) {
    this._rawValue = __v_isShallow ? value : toRaw(value) // 这里使用了 toRaw
    this._value = __v_isShallow ? value : toReactive(value)
  }

  get value() {
    trackRefValue(this)
    return this._value
  }

  set value(newVal) {
    if (hasChanged(toRaw(newVal), this._rawValue)) {
      this._rawValue = newVal
      this._value = this.__v_isShallow ? newVal : toReactive(newVal)
      triggerRefValue(this, newVal)
    }
  }
}

export function trackRefValue(ref: RefImpl<any>) {
  if (isTracking()) {
    ref = toRaw(ref) // 追踪的是原始的 ref 对象
    if (!ref.dep) {
      ref.dep = createDep()
    }
    if (__DEV__) {
      trackEffects(ref.dep, {
        target: ref,
        type: TrackOpTypes.GET,
        key: 'value'
      })
    } else {
      trackEffects(ref.dep)
    }
  }
}

export function triggerRefValue(ref: RefImpl<any>, newVal?: any) {
  ref = toRaw(ref) // 触发更新的是原始的 ref 对象
  if (ref.dep) {
    if (__DEV__) {
      triggerEffects(ref.dep, {
        target: ref,
        type: TriggerOpTypes.SET,
        key: 'value',
        newValue: newVal
      })
    } else {
      triggerEffects(ref.dep)
    }
  }
}

export function createDep(effects?: ReactiveEffect[]): Dep {
  const dep = new Set<ReactiveEffect>(effects) as Dep
  dep.w = 0
  dep.n = 0
  return dep
}

export function toRefs<T extends object>(
  object: T
): { [K in keyof T]: Ref<T[K]> } {
  if (__DEV__ && !isProxy(object)) {
    console.warn(`toRefs() expects a reactive object but received a plain one.`)
  }
  const ret: any = isArray(object) ? new Array(object.length) : {}
  for (const key in object) {
    ret[key] = toRef(object, key)
  }
  return ret
}

export function toRef<T extends object, K extends keyof T>(
  object: T,
  key: K
): Ref<T[K]> {
  return new ObjectRefImpl(object, key) as any
}

class ObjectRefImpl<T extends object, K extends keyof T> {
  public readonly __v_isRef = true

  constructor(
    private readonly _object: T,
    private readonly _key: K
  ) {}

  get value() {
    return this._object[this._key]
  }

  set value(newVal) {
    this._object[this._key] = newVal
  }
}

仔细观察 RefImpl 类的构造函数：

constructor(value: T, public readonly __v_isShallow: boolean) {
  this._rawValue = __v_isShallow ? value : toRaw(value); // 这里使用了 toRaw
  this._value = __v_isShallow ? value : toReactive(value);
}

可以看到，如果传入的 value 不是浅层的（__v_isShallow 为 false），那么会先用 toRaw(value) 把 value 转换成原始对象，然后再赋值给 this._rawValue。

这就是 ref 剥掉 reactive 对象响应式特性的关键所在。

六、为什么要用 toRaw？更深层次的思考

除了上面提到的避免双重代理和响应式混乱之外，使用 toRaw 还有更深层次的考虑：

控制响应式粒度： Vue 3 的响应式系统是基于 Proxy 的，Proxy 的性能开销相对较大。使用 toRaw 可以让我们更精细地控制哪些数据需要响应式，哪些数据不需要。
避免不必要的更新： 有时候，我们只需要读取 reactive 对象的值，而不需要监听它的变化。使用 toRaw 可以避免不必要的更新，提高性能。
与其他库的兼容性： 有些第三方库可能不兼容 Vue 3 的响应式对象。使用 toRaw 可以把 reactive 对象转换成原始对象，方便与其他库集成。

七、总结：ref 的类型转换，一门精妙的艺术

ref 的类型转换机制是 Vue 3 响应式系统的重要组成部分。通过使用 toRaw，Vue 3 能够有效地避免双重代理、响应式混乱等问题，并提供更精细的响应式控制。

总而言之，ref 遇到 reactive 对象，先用 toRaw 剥皮，然后再包装，这是一种巧妙的设计，体现了 Vue 3 团队对性能和灵活性的极致追求。

今天的讲座就到这里，希望各位观众老爷有所收获！下次咱们再聊聊 Vue 3 的其他有趣特性。谢谢大家！

发表回复 取消回复

发表回复取消回复