vue3.0 isReadonly、isRef、isReactive和isProxy响应式源码实现

ref判断:
	往返回的对象中添加一个_is_ref:true的标识

isReadonly和isReactive都是Proxy代理的:
	故在对应的Proxy处理器的get中,添加属性property==='_is_reactive'判断,并返回true,故通过访问_is_reactive属性标识即可

isProxy判断为isReadonly或isReactive即可

代码示例:

function ref(target) {
  if (target && typeof target === "object") {
    target = reactive(target);
    return target;
  }

  return {
    _is_ref:true,
    _value: target,
    get value() {
      console.log('读取数据');
      return this._value;
    },
    set value(val) {
      console.log('修改数据');
      this._value = val;
    }
  }
}

const reactiveHandler = {
  get(target, property) {
    
    if (property === "_is_reactive") return true;

    console.log('读取了'+property+"属性")
    const result = Reflect.get(target, property);

    return result;
  },
  set(target, property, value) {
    console.log('设置了'+property+'属性')
    const result = Reflect.set(target, property, value);
    return result;
  },
  deleteProperty(target, property) {
    console.log('删除了' + property + "属性");
    const res = Reflect.deleteProperty(target, property);
    return res;
  }
}

//readonly相关处理器
const readonlyHandler = {
  get(target, property) {
    if (property === "_is_reactive") return true;
    console.log('读取了'+property+"属性")
    const result = Reflect.get(target, property);

    return result;
  },
  set(target, property, value) {
    console.log("只能读取,不能修改属性"+property);
    
  },
  deleteProperty(target, property) {
    console.log("只能读取,不能删除属性"+property);
  }
}

function isRef(obj) {
  return obj && obj._is_ref; //_is_ref为标识,给之前创建时添加该标识即可判断
}

function isReactive(obj) {
  return obj && obj._is_reactive;
}

function isReadonly(obj) { //reactive和readonly都是使用代理
  return obj && ob._is_reactive;
}

function isProxy(obj) {
  return isReactive(obj) || isReadonly(obj);
}