reactive深度嵌套与readonly深度嵌套

82 阅读1分钟

proxy代理的过程当中,对于深层次对象是不能一次性代理需要层层调用方法才能代理成响应式对象

代理嵌套实现

function createGetter(isReadonly = false, shallow = false) {
  return function get(target, key) {
    const res = Reflect.get(target, key);
   	//...省略代码
    if (isObject(res)) {
      return isReadonly ? readonly(res) : reactive(res);
    }
    //...省略代码
    //添加依赖
    if (!isReadonly) {
      track(target, key as string);
    }
    return res;
  };
}

在这里当用户访问内部嵌套对象进行判断如果内部属性也是一个对象那么就会重新调用使他变成一个响应式对象,通过使用场景判断调用哪一个响应式方法是reactive 还是readonly

isProxy

检查一个对象是否是由 reactive 或者 readonly 方法创建的代理。

这个方法实现很简单可以利用先前实现的 isReactiveisReadonly 进行判断实现

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