3分钟了解vue数据劫持的原理实现_浏览器控制台查看某个值 - CSDN文库

14 浏览量更新于2023-03-03 评论收藏 43KB PDF 举报

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

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

3分钟了解分钟了解vue数据劫持的原理实现数据劫持的原理实现

目的: 了解Object.defineProperty如何实现数据劫持

大致原理是这样的：

定义一个监听函数，对对象的每一个属性进行监听

通过Object.defineProperty对监听的每一个属性设置get 和 set 方法。

对对象实行监听

对对象内嵌对象进行处理

对数组对象进行处理

1. 先定义一个对象先定义一个对象

let obj = {

name: 'jw'

}

2. 定义一个监听函数定义一个监听函数

/**

* 判断监听的是否是对象

* 如果是对象，就遍历，并且对每个属性进行定义get 和 set

*/

function observer(obj) {

if(typeof obj === 'object') {

for (let key in obj) {

// defineReactive 方法设置get和set，见第三步

defineReactive(obj, key, obj[key]);

}

}

}

3.定义一个函数，处理每个属性定义一个函数，处理每个属性

function defineReactive(obj, key, value) {

Object.defineProperty(obj, key, {

get() {

return value;

},

set(val) {

console.log('数据更新了')

value = val;

}

})

}

ok. 到这里初版已经实现了。尝试一下吧

observer(obj);

obj.name = 'haha'

控制台输出:

//数据更新了

以上已经实现设置obj的属性的时候，被监听到，并且可以去执行一些代码了。但是，如果对象里面嵌入了对象呢？比如:

let obj = {

name: 'jw',

age: {

old: 60

}

}

执行以下代码

observer(obj);

obj.age.old = '50'

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

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

评论0

weixin_38605590

粉丝: 2
资源: 864

会员权益专享

图片转文字

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

最新资源

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