vue3源码之readonly的实现

62 阅读1分钟

readonly: readonly相对于reactive的区别是不能进行set操作,也就是reactive只读方法的实现

  export function createGetter(ifReadOnly = false){
    return function get(target, key){
      const res = Reflect.get(target,key);
      if(!ifReadOnly){
        track(target, key);
      }
      return res;
    }
  }
  export function createSetter(){
    return function set(target, key, value){
      const res = Reflect.set(target, key, value);
      trigger(target, key);
      return res;
    }
  }
  export function reactive(raw){
    return new Proxy(raw, {
    get: createGetter(),
    set: createSetter(),
  }
  export function readonly(raw){
    return new Proxy(raw, {
      get: createGetter(true),
      set(){
        return true;
      },
     }
  }