Vue六大基本类型中的原始值响应式

function ref(val) {
  // 包裹对象
  const wrapper = {
    value: val,
  };
  // 是否为ref的判据
  Object.defineProperty(wrapper, "__v_isRef", {
    value: true,
  });
  // 返回响应式数据
  return reactive(wrapper);
}

export default {
  setup() {
    const obj = reactive({ a: 1, b: 2 });
    return {
      ...obj,
    };
  },
};

const obj = reactive({ a: 1, b: 2 });
const newobj = {
  a: {
    get value() {
      return obj.a;
    },
  },
  b: {
    get value() {
      return obj.b;
    },
  },
};
console.log(newobj.a.value);

function toRef(obj, key) {
  const wrapper = {
    get value() {
      return obj[key];
    },
    set value(val) {
      obj[key] = val;
    },
  };
  Object.defineProperty(wrapper, "__v_isRef", {
    value: true,
  });
  return wrapper;
}

function proxyRefs(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      const value = Reflect.get(target, key, receiver);
      return value.__v_isRef ? value.value : value;
    },
  });
}