Proxy 简介

Proxy 可以理解为，在操作对象时要先经过一层“拦截器”。访问对象时，都必须先经过这一层拦截。这就意味着你可以在拦截里做各种骚操作。 比如，整一个 Proxy 的对象用来对后端返回的数据类型进行类型校验，不通过直接 throw new Error('大兄弟，说好的对象，你给我返回一个数组？！')，记得搭配 try catch 食用，风味更佳！

让我们先看看怎么使用 Proxy.

const p = new Proxy(target, handler);

const p = new Proxy({}, {
    get(target, propKey) {
        Ha ha, you have been intercepted by me;
    }
});

console.log(p.name);
//Ha ha, you're intercepted by me

以上例子，只是展示了 proxy 怎么操作对象属性，而他的核心是为了扩展对象的能力。

让我看看另外一个例子 我们可以使用 set 方法，让对象的 name 属性无法被修改

const p = new Proxy({}, {
    set(target, propKey, value) {
        if (propKey === 'name') {
            Throw new typeerror ('name attribute is not allowed to be modified ');
        }
        //Not name attribute, save directly
        target[propKey] = value;
    }
});
p.name = 'proxy';
//Typeerror: the name property is not allowed to be modified
p.a = 111;
console.log(p.a); // 111

babel is used to translate syntax, such as new apis (such as Array.from ， Array.prototype.includes ）We need to install additional packages for support, such as [core JS / stable] () and [regenerator Runtime / runtime] () (PS: Babel 7. X @ Babel / Polyfill is not recommended), and then there are some APIs (string normalize, proxy, fetch, etc.)core-jsFor details, please refer to the official document core JS ා missing polyfills.

vue2.X 是如何实现响应式系统的？

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty() 把这些 property 全部转为 getter/setter。在 getter 方法中收集数据依赖，在 setter 中监听数据变化。一旦数据发生变化，再通知订阅者。

每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。 

图片来源：Vue 官网

让我们先看看部分源码 Src / core / observer/ index.js#L156 -L193, version 2.6.11

let childOb = !shallow && observe(val)
 //The data in the data is deeply traversed, and a response formula is added to each attribute of the object
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
         //Do dependency collection
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            //If it is an array, you need to collect the dependency of each member. If the member of the array is still an array, it will be recursive.
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      //New values need to be observed again to ensure data response
      childOb = !shallow && observe(newVal)
      //Inform all observers of data changes
      dep.notify()
    }
  })

能看出 defineProperty 的痛点吗？

Vue.set: 向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')

Proxy 在 Vue3.0 中上位

为什么 Proxy 可以解决以上的痛点呢？ 本质的原因在于 Proxy 是一个内置了拦截器的对象，所有的外部访问都得先经过这一层拦截。不管是先前就定义好的，还是新添加属性，访问时都会被拦截。

Take a simple one

先用 Object.defineProperty() 来实现：

class Observer {
  constructor(data) {
      //Traverse the property of parameter data and add it to this
      for(let key of Object.keys(data)) {
          if(typeof data[key] === 'object') {
              data[key] = new Observer(data[key]);
          }
          Object.defineProperty(this, key, {
              enumerable: true,
              configurable: true,
              get() {
                  console.log('You visited '+ key);
                  return data[key]; // the bracket method can use a variable as the attribute name, but the dot method cannot;
              },
              set(newVal) {
                  console.log ('You set '+ key);
                  console.log ('New '+ key +' = '+ newVal);
                  if(newVal === data[key]) {
                      return;
                  }
                  data[key] = newVal;
              }
          })
      }
  }
}

const obj = {
  name: 'app',
  age: '18',
  a: {
      b: 1,
      c: 2,
  },
}
const app = new Observer(obj);
app.age = 20;
console.log(app.age);
app.newPropKey  ='new attribute';
console.log(app.newPropKey);

上述代码的输出结果是

//Modify the output of obj's original attribute age
You set age
New age = 20
You visited age
20
//Set the output of the new property
new property

正如你看到的，新添加的属性没有被监测到。只有手动调用 Object.defineProperty() 才能被 Vue 添加到侦查机制里。 这就是为什么在 $set 添加或删除对象属性失败后，会调用 Object.defineProperty() 来解决的原因.

让我们再用 Proxy 来实现：

const obj = {
  name: 'app',
  age: '18',
  a: {
      b: 1,
      c: 2,
  },
}
const p = new Proxy(obj, {
  get(target, propKey, receiver) {
      console.log ('You visited '+ propKey);
      return Reflect.get(target, propKey, receiver);
  },
  set(target, propKey, value, receiver) {
      console.log ('you set ' + propKey);
      console.log ('New '+ propKey +' = '+ value);
      Reflect.set(target, propKey, value, receiver);
  }
});
p.age = '20';
console.log(p.age);
p.newPropKey = 'new attribute';
console.log(p.newPropKey);

输出如下：

//Modify the age property of the original object
You set age
New age = 20
You visited age
20

//Set new properties
You set up newpropkey
New newpropkey = new property
You visited newpropkey
new property

正如你看到的，新增的属性不需要再重新执行响应式操作就能被拦截。待到天荒地老，海枯石烂，Proxy 对对象属性的拦截永不变。

Reflect (introduced in ES6) is a built-in object that provides a way to intercept JavaScript operations. Some object objects are obviously internal methods of the language (such as Object.defineProperty()）PutReflectObject. Modify the returned results of some object methods to make them more reasonable. Make object operations function behavior. See MDN for details

总结

本文翻译自 Simple and popular understanding of proxy in vue3.0
译者：Yeo Huang