答案:
VUE 实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set)的操作来实现的。
Vue3.0 将用原生 Proxy 替换 Object.defineProperty。
一、Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
语法
代码语言:javascript复制Object.defineProperty(obj,prop,descriptor)
参数
obj
- 要定义属性的对象。
prop
- 要定义或修改的属性的名称或
Symbol
。 descriptor
- 要定义或修改的属性描述符。
返回值
被传递给函数的对象
在ES6中,由于 Symbol类型的特殊性,用Symbol类型的值来做对象的key与常规的定义或修改不同,而Object.defineProperty
是定义key为Symbol的属性的方法之一。
Demo:
代码语言:javascript复制const object = {};
Object.defineProperty(object, 'property', {
value: 100,
writable: true
});
object.property = 200;
console.log(object.property);
// output: 200
二、Proxy(代理) 是 ES6 中新增的一个特性。Proxy 让我们能够以简洁易懂的方式控制外部对对象的访问。其功能非常类似于设计模式中的代理模式。
语法
代码语言:javascript复制var p = new Proxy(target, handler)
参数
- target
- 被代理对象。
hander
- 是一个对象,其声明了代理target的一些操作。
p 是代理后的对象。
当外界每次对 p 进行操作时,就会执行 handler 对象上的一些方法。handler 能代理的一些常用的方法如下:
- get:读取
- set:修改
- has:判断对象是否有该属性
- construct:构造函数
- ...
Demo:
代码语言:javascript复制var target = {
value: 100
};
var handler = {
get: function(target, key) {
console.log(`${key} 被读取`);
return target[key];
},
set: function(target, key, value) {
console.log(`${key} 被设置为 ${value}`);
target[key] = value;
}
}
var p = new Proxy(target, handler);
p.value; // 控制台输出:"value 被读取"
console.log(target.value); // 控制台输出: 100
p.value = 200; // 控制台输出:"value 被设置为 200"
console.log(target.value); // 控制台输出: 200