实现vue的数据代理(Proxy用法)

136 阅读1分钟

使用Proxy时,Reflect也是必须的。

它的数据代理与vue2中的Object.defineProperty相比,它不需要更多的操作就可以直接进行深度监听。

        name: '小明',
        age: 20,
        wife: {
          name: '小红',
          age: 19,
        },
      }

      // 数据代理
      // user 代理对象
      // 处理器对象
      const proxyUser = new Proxy(user, {
        get(target, prop) {
          console.log('get方法调用了')
          // 需要使用reflect才能将数据反射到proxyUser,否则取不到值
          return Reflect.get(target, prop)
        },
        set(target, prop, val) {
          console.log('set方法调用了')
          return Reflect.set(target, prop, val)
        },
        deleteProperty(target, prop) {
          console.log('deleteProperty方法调用了')
          return Reflect.deleteProperty(target, prop)
        },
      })