vue Ref 和 Reactive 原理解析

Ref

• ref 的语义是指向一个值的引用，主要用于处理基本数据类型和单一值对象，即对值的引用进行包装和管理，而不是对对象的操作进行拦截，对于基础类型通过 getter 和 setter 实现拦截
• 使用 Proxy 拦截对象的所有操作（如 get、set、deleteProperty 等），这是一个强大的 API，但同时也带来一定的性能开销。对于基础的响应式处理，使用 Proxy 显得过于繁重
• ref 更适合用于单一值的场景，它的设计初衷就是为了处理这些简单情况，通过 getter 和 setter 可以更简洁地实现响应式
• 但是如果 ref 在处理对象时，会将对象转换为响应式对象。这种转换实际上是通过 reactive 实现的，即在 ref 中如果传递的是对象类型，最终会使用 Proxy 来实现响应式功能。

export function ref(value?: unknown) {
  return createRef(value, false);
}

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

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

  constructor(value: T, public readonly __v_isShallow: boolean) {
    this._rawValue = value;
    this._value = __v_isShallow ? value : toReactive(value);
  }

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

  set value(newVal) {
    if (hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal;
      this._value = toReactive(newVal);
      triggerRefValue(this);
    }
  }
}

// 判断 ref 的引用值是否是对象
function toReactive(value: any): any {
  return isObject(value) ? reactive(value) : value;
}

Reactive

• reactive 主要用于将复杂对象变成响应式对象，这些对象可能包含嵌套的结构。对于这种情况，Proxy 是更合适的工具，因为它能够拦截和处理对象的所有操作，确保对象及其嵌套结构的每个部分都是响应式的

export function reactive(target: object) {
  if (isReadonly(target)) {
    return target;
  }
  return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers);
}

function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>
) {
  if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`);
    }
    return target;
  }

  const proxy = new Proxy(
    target,
    collectionType ? collectionHandlers : baseHandlers
  );
  return proxy;
}

export const mutableHandlers: ProxyHandler<object> = {
  get,
  set,
  deleteProperty,
  has,
  ownKeys
};