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

前言

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

今天我们要做的事是:

  1. 学习语法
  2. 与Object.defineProperty的对比
  3. 写一个类似于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
将被定义或修改的属性描述符。

可见:

  1. Object.defineProperty是针对一个对象的单一属性来设置setter和getter,Proxy是劫持对象自身,给对象自身来设置setter和getter。
  2. Object.defineProperty返回的是修饰过后的对象,Proxy是返回劫持之后的对象,这一点比较类似。
  3. Proxy能劫持数组,Object.defineProperty没有这个能力。
  4. 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();
              })
          }
        });
    }

推荐阅读更多精彩内容