前言

Vue.js 3.0开始使用Proxy作为数据监听手段，今天来学习一下。

今天我们要做的事是：

学习语法
与Object.defineProperty的对比
写一个类似于vue的v-model的案例

MDN文档

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy

阮一峰ES6手册

http://es6.ruanyifeng.com/#docs/proxy

基本语法

非常简单，就2个参数，多一个都没有。

let p = new Proxy(target, handler);

范例：

const originalObj = {
    name: 'xialei'
};
const publicObj = new Proxy(originalObj, {
    set(target, prop, value) {
        // 将属性值转化为大写
        target[prop] = value.toString().toUpperCase();
    }
});

publicObj.name = 'xialei';
console.log(publicObj.name); // XIALEI

13个方法

从阮一峰的手册可以看到，ES6 Proxy有13个方法，其中大多数是少用的方法，主要还是get、set。

Proxy劫持数组的范例

let arr = [2,4];
let proxy = new Proxy(arr, {
  set(target, prop, value) {
    target[prop] = value * 2.5
    return true
  }
})
proxy[4] = 11
console.log(proxy[4]) // 27.5
proxy.push(22)
console.log(proxy) // 末位已经追加上了55

与Object.defineProperty的对比

Object.defineProperty(obj, prop, descriptor)
参数
obj
要在其上定义属性的对象。
prop
要定义或修改的属性的名称。
descriptor
将被定义或修改的属性描述符。

可见：

Object.defineProperty是针对一个对象的单一属性来设置setter和getter，Proxy是劫持对象自身，给对象自身来设置setter和getter。
Object.defineProperty返回的是修饰过后的对象，Proxy是返回劫持之后的对象，这一点比较类似。
Proxy能劫持数组，Object.defineProperty没有这个能力。
Proxy的劫持方法非常多，而Object.defineProperty就很单一，因为名字就决定了只是给属性增加修饰。

用Proxy写一个双向绑定案例

我在2018年9月，参考了一些文档之后写了一个基于Object.defineProperty的双向绑定案例（https://www.jianshu.com/p/34fd579dfc0b），Vue 2.0正是基于它的。现在，Vue 3.0将在2020年第一季度上线，今天写一个基于Proxy的案例。大量代码继续沿用去年文章，就这个案例来讲，代码唯一要变动的就是_observer原型方法。

原本的写法是：

    Vue.prototype._observer = function (data) {
        var self = this;
        Object.keys(data).forEach(function (key) {
            var oldValue = data[key];
            self._binding[key] = {
                _updaterList: []
            }
            Object.defineProperty(data, key, {
                enumerable: true,
                configurable: true,
                get: function () {
                    return oldValue;
                },
                set: function (newValue) {
                    if (oldValue === newValue) return;
                    oldValue = newValue;
                    self._binding[key]._updaterList.forEach(function (updater) {
                        updater.update();
                    })
                }
            });
        })
    }

现在的写法是：

    Vue.prototype._observer = function (data) {
        Object.keys(data).forEach(key => {
            this._binding[key] = {
                _updaterList: []
            }
        });
        this.$data = new Proxy(data, {
          get: (target, prop, value) => {
            return target[prop]
          },
          set: (target, prop, value) => {
            if (target[prop] === value) return;
            target[prop] = value
              this._binding[prop]._updaterList.forEach(function (updater) {
                  updater.update();
              })
          }
        });
    }

ES6 Proxy学习、与Object.defineProperty的对比、双向绑定案例

前言