详谈Object.defineProperty及实现数据双向绑定_defineproperty和proxy区别 - CSDN文库

7 浏览量更新于2023-05-06 评论收藏 81KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

详谈详谈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 配置项。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余6页未读，立即下载

评论0

weixin_38713009

粉丝: 8
资源: 919

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈