ref 和 reactive 异同

1. ref 接受一个内部值，返回一个响应式的、可更改的 ref 对象,reactive 返回响应式代理对象
2. 从定义上看ref通常用于处理基本类型的响应式，reactive用于处理对象类型的数据响应式
3. ref 返回的响应式数据在 js 中使用需要加上.value才能访问，在视图中会自动脱ref，ref可以接收非原始值，但内部依然是reactive实现的响应式；reactive内部如果接收Ref对象会自动脱ref。
4. reactive 内部使用Proxy代理传入的对象并且拦截该对象的各种操作，实现响应式。ref内部封装一个RefImpl类，并且设置 get set 方法拦截操作，实现响应式。

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

function createReactiveObject(
  target,
  isReadonly,
  baseHandlers,
  collectionHandlers
) {
  // ...
  // 创建代理对象
  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  );
  // 在 baseHandlers 中进行访问拦截
  return proxy;
}

// ref
function ref(value?: unknown) {
  return createRef(value, false);
}
function createRef(rawValue: unknown, shallow: boolean) {
  if (isRef(rawValue)) {
    return rawValue;
  }
  return new RefImpl(rawValue, shallow);
}