3分钟了解vue数据劫持的原理
栏目: JavaScript · 发布时间: 5年前
内容简介:目的: 了解Object.defineProperty如何实现数据劫持阅读时间: 3 分钟大致原理是这样的:
目的: 了解Object.defineProperty如何实现数据劫持
阅读时间: 3 分钟
大致原理是这样的:
- 定义一个监听函数,对对象的每一个属性进行监听
- 通过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' 控制台输出: 空 复制代码
4.对监控的obj进行迭代处理
// 修改defineReactive , 添加一行代码 function defineReactive(obj, key, value) { // 如果对象的属性也是一个对象。迭代处理 observer(value); Object.defineProperty(obj, key, { //.... }) } 复制代码
再执行以下代码:
observer(obj); obj.age.old = '50' 控制台输出: //数据更新了 复制代码
可惜的是,如果对象是一个数组,Object.defineProperty就无法起作用了,比如:
obj.skill = [1, 2, 3]; obj.age.push(4); 控制台输出: //空 复制代码
实际上,不止push,包括slice,shift,unshif...都是没有作用.
5. 重写数组的方法
let arr = ['push', 'slice', 'shift', 'unshift']; arr.forEach(method=> { let oldPush = Array.prototype[method]; Array.prototype[method] = function(value) { console.log('数据更新了') oldPush.call(this, value) } }) 复制代码
再执行以下代码:
obj.skill = [1, 2, 3]; obj.skill.push(4); 控制台输出: //数据更新了 复制代码
但是,数组的length操作仍然是无效的。这也是为什么vue中只能通过方法去改变数组的原因了。
总结: Object.defineProperty只是解决了状态变更后,如何触发通知的问题,那要通知谁呢?谁会关心那些属性发生了变化呢?以后再说。
感谢阅读!
我是海明月, 前端小学生。
以下完整代码
let obj = { name: 'jw', age: { old: '60' } } // vue 数据劫持 Observer.defineProperty function observer(obj) { if(typeof obj === 'object') { for (let key in obj) { defineReactive(obj, key, obj[key]); } } } function defineReactive(obj, key, value) { observer(value); Object.defineProperty(obj, key, { get() { return value; }, set(val) { console.log('数据更新了') value = val; } }) } observer(obj); // obj.age.old = '50' // Object.defineProperty 对 数组无效 let arr = ['push', 'slice', 'shift', 'unshift']; arr.forEach(method=> { let oldPush = Array.prototype[method]; Array.prototype[method] = function(value) { console.log('数据更新了') oldPush.call(this, value) } }) obj.skill = [1, 2, 3]; obj.skill.push(4); 复制代码
以上所述就是小编给大家介绍的《3分钟了解vue数据劫持的原理》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
ES6标准入门(第3版)
阮一峰 / 电子工业出版社 / 2017-9 / 99.00
ES6是下一代JavaScript语言标准的统称,每年6月发布一次修订版,迄今为止已经发布了3个版本,分别是ES2015、ES2016、ES2017。本书根据ES2017标准,详尽介绍了所有新增的语法,对基本概念、设计目的和用法进行了清晰的讲解,给出了大量简单易懂的示例。本书为中级难度,适合那些已经对JavaScript语言有一定了解的读者,可以作为学习这门语言最新进展的工具书,也可以作为参考手册......一起来看看 《ES6标准入门(第3版)》 这本书的介绍吧!