proxy原理

proxy的响应式原理

    let obj = {
      name: {name: 'xx'},
      arr: ['睡', '吃', '玩']
    }

    let handler= {
      get(target, key){
        console.log('收集依赖')
        if(typeof target[key] === 'object' && target[key] !== null) { // proxy为懒代理，只能代理最外层 通过递归进行深层代理
          return new Proxy(target[key], handler)
        }
        // return target[key]
        return Reflect.get(target, key)
      },
      set(target, key, value){
        console.log('触发更新')
        let oldValue = target[key];
        console.log(key, oldValue, value)
        if (!oldValue) { // 对数组length特殊处理
          console.log('新增')
        } else if(oldValue != target[key]){
          console.log('修改属性')
        }
        // target[key] = value // 设置不成功不会报错 比如对象不可配置，因此推荐采用Reflect.set
        return Reflect.set(target, key, value)
      }
    }
    let proxy = new Proxy(obj, handler)
    console.log(proxy.name.name, "11") 

• 优点 defineProperty只能拦截特定属性，但是proxy只要在获取值时就能添加代理 当为对象添加属性时，默认对不存在的属性也会进行拦截 对数组需要特殊处理
• 缺点 兼容性差