浅聊vue双向绑定原理Object.defineProperty-/-Proxy
什么是双向绑定？
当数据模型data变化时，页面视图会得到响应更新
vue又是怎么做的？
vue其实现原理是对data的getter/setter方法进行拦截（Object.defineProperty或者Proxy），利用发布订阅的设计模式，在getter方法中进行订阅，在setter方法中发布通知，让所有订阅者完成响应。
说这些的时候我们在刚使用vue2.x的就会遇到过数据更新了啊，为何页面不更新呢。这其实就是Object.defineProperty在作祟。
而在vue3还没有发布时，很火的一个话题就是Vue3将使用Proxy 取代Vue2 版本的Object.defineProperty。那么Proxy对比Object.defineProperty有什么优势。
Proxy对比Object.defineProperty
Proxy
- Proxy可以直接监听对象而非属性
- Proxy可以直接监听数组的变化
- Proxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的
- Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,不需要像Object.defineProperty一样遍历每个属性有一定的性能提升
- Proxy作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利
- Proxy直接实现对象属性的新增/删除
Object.defineProperty
-
Object.defineProperty只能劫持对象的属性，需要遍历对象的每一个属性，如果属性值也是对象，就需要递归进行深度遍历。
-
Object.defineProperty劫持的是对象的属性，所以新增属性时，需要重新遍历对象， 对其新增属性再次使用Object.defineProperty进行劫持。也就是Vue2.x中给数组和对象新增属性时，需要使用$set才能保证新增的属性也是响应式的, $set内部也是通过调用Object.defineProperty去处理的。
冷知识
Object.defineProperty无法监听数组数据的变化，但是为什么数组在使用push pop等方法的时候可以触发页面更新呢，那是因为vue内部拦截了这些方法。比如数组在使用push pop等方法的时候为什么可以触发页面更新呢，那是因为vue内部拦截了这些方法。
// 重写push等方法，然后再把原型指回原方法
var ARRAY_METHOD = [ 'push', 'pop', 'shift', 'unshift', 'reverse', 'sort', 'splice' ];
var array_methods = Object.create(Array.prototype);
ARRAY_METHOD.forEach(method => {
array_methods[method] = function () {
// 拦截方法
return Array.prototype[method].apply(this, arguments);
}
});
回归正题我们分别用代码简单的实现下Proxy对比Object.defineProperty如何实现绑定的
Object.defineProperty实现
// 这是将要被劫持的对象
const data = {
name: '',
};
// 遍历对象,对其属性值进行劫持
Object.keys(data).forEach(function(key) {
console.log('1')
Object.defineProperty(data, key, {
enumerable: true,
configurable: true,
get: function(newVal) {
return val
},
set: function(newVal) {
// 当属性值发生变化时我们可以进行额外操作
console.log(`大家好,我是${newVal}我被劫持了`);
val = newVal;
},
});
});
data.name = '111';
Proxy实现
const target = {
name: '控制'
};
const handler = {
get: function(target, key) {
console.log(`${key} 被读取`);
return target[key];
},
set: function(target, key, value) {
console.log(`${key} 被设置为 ${value}`);
target[key] = value;
}
};
const testObj = new Proxy(target, handler);
console.log(testObj.name); // name 被读取 及输出名字 控制
testObj.name = 1; // name 被设置为 1 输出 1
Proxy参数介绍
1.get(target, propKey, receiver)
该方法的含义是：用于拦截某个属性的读取操作。它有三个参数，如下解析：
- target: 目标对象。
- propKey: 目标对象的属性。
- receiver: (可选)，该参数为上下文this对象
2.set(target, propKey, value, receiver)
该方法是用来拦截某个属性的赋值操作，它可以接受四个参数，参数解析分别如下：
- target: 目标对象。
- propKey: 目标对象的属性名
- value: 属性值
- receiver(可选): 一般情况下是Proxy实列
3.has(target, propKey)
该方法是判断某个目标对象是否有该属性名。接收二个参数，分别为目标对象和属性名。返回的是一个布尔型。
- target: 目标对象。
- propKey: 目标对象的属性名
4.construct(target, args, newTarget)
该方法是用来拦截new命令的，它接收三个参数，分别为 目标对象，构造函数的参数对象及创造实列的对象。
第三个参数是可选的。它的作用是拦截对象属性。
- target: 目标对象。
- args: 构造函数的参数对象
- newTarget：创造实列的对象
5.apply(target, object, args)
该方法是拦截函数的调用的。该方法接收三个参数，分别是目标对象。目标对象上下文this对象 和 目标对象的数组；它和 Reflect.apply参数是一样的
第三个参数是可选的。它的作用是拦截对象属性。
- target: 目标对象。
- object: 目标对象上下文this对象
- args：目标对象的数组
写在最后的话大家不要忘记，点赞，评论，收藏
