详谈详谈Object.defineProperty 及实现数据双向绑定及实现数据双向绑定
Object.defineProperty() 和 Proxy 对象，都可以用来对数据的劫持操作。何为数据劫持呢？就是在我们访问或者修改某个对象
的某个属性的时候，通过一段代码进行拦截行为，然后进行额外的操作，然后返回结果。那么vue中双向数据绑定就是一个典
型的应用。
Vue2.x 是使用 Object.defindProperty()，来进行对对象的监听的。
Vue3.x 版本之后就改用Proxy进行实现的。
下面我们先来理解下Object.defineProperty作用。
一一: 理解理解Object.defineProperty的语法和基本作用。的语法和基本作用。
在理解之前，我们先来看看一个普通的对象，对象它是由多个名/值对组成的无序集合。对象中每个属性对于任意类型的值。
比如现在我们想创建一个简单的对象，可以简单的如下代码：
const obj = new Object; // 或 const obj = {};
obj.name = 'kongzhi';
console.log(obj.name); // 在控制台中会打印 kongzhi
obj.xxx = function() {
console.log(111);
}
// 调用 xxx 方法
obj.xxx(); // 在控制台中会打印 111
但是除了上面添加对象属性之外，我们还可以使用 Object.defineProperty 来定义新的属性或修改原有的属性。最终会返回该
对象。
接下来我们慢慢来理解下该用法。
基本语法：基本语法：
Object.defineProperty(obj, prop, descriptor);
基本的参数解析如下：
obj: 可以理解为目标对象。
prop: 目标对象的属性名。
descriptor: 对属性的描述。
那么对于第一个参数obj 和 prop参数，我们很容易理解，比如上面的实列demo，我们定义的 obj对象就是第一个参数的含义，
我们在obj中定义的name属性和xxx属性是prop的含义，那么第三个参数描述符是什么含义呢？
descriptor： 属性描述符，它是由两部分组成，分别是：数据描述符和访问器描述符，数据描述符的含义是：它是一个包含属
性的值，并说明这个属性值是可读或不可读的对象。访问器描述符的含义是：包含该属性的一对 getter/setter方法的对象。
下面我们继续来理解下 数据描述符 和 访问器描述符具体包含哪些配置项含义及用法。
1.1 数据描述符数据描述符
const obj = {
name: 'kongzhi'
};
// 对obj对象已有的name属性添加数据描述
Object.defineProperty(obj, 'name', {
configurable: true | false,
enumerable: true | false,
value: '任意类型的值',
writable: true | false
});
// 对obj对象添加新属性的描述
Object.defineProperty(obj, 'newAttr', {
configurable: true | false,
enumerable: true | false,
value: '任意类型的值',
writable: true | false
});
如上代码配置，数据描述符有如上configurable，enumerable，value 及 writable 配置项。
评论0