vue2中的proxy代理

代理的作用是把 props 和 data 上的属性代理到 vm 实例上，这也就是为什么比如我们定义了data和 props，却可以通过 vm 实例访问到它（即在vue中我们直接通过this. 拿到对应的属性）

vue2中通过一个代理函数proxy,代码如下

const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: noop,
  set: noop,
}
export function proxy(target, sourceKey, key) {
  sharedPropertyDefinition.get = function proxyGetter() {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter(val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

简化一下

 function proxy(target, prop, key) {
      Object.defineProperty(target, key, {
        enumerable: true,
        configurable: true,
        get() {
          return target[prop][key];
        },
        set(newVal) {
          target[prop][key] = newVal;
        }
      });
    }

测试

   let vm = {
      _props: {
        id: 1,
        name: '测试',
        sex: '男',
        todo: 'play'
      }
    }
    console.log(vm._props.name, vm.name)
    proxy(vm, '_props', 'name')
    console.log(vm.name)
    console.log(vm.id)