前言
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
监听对象属性的值变化
所谓监听，并不是真的监听，而是重写对象的set方法，在赋值的同时触发一个函数，就好像是在监听一样。
const originalObj = {
name: 'xialei'
};
const publicObj = new Proxy(originalObj, {
set(target, prop, value) {
target[prop] = value;
watchOriginalObj(value);
}
});
function watchOriginalObj(value) {
console.log('新值', value)
}
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();
})
}
});
}
