3分钟了解vue数据劫持的原理实现
目的:了解Object.defineProperty如何实现数据劫持
大致原理是这样的:
- 定义一个监听函数,对对象的每一个属性进行监听
- 通过Object.defineProperty对监听的每一个属性设置get和set方法。
- 对对象实行监听
- 对对象内嵌对象进行处理
- 对数组对象进行处理
1.先定义一个对象
letobj={ name:'jw' }
2.定义一个监听函数
/** *判断监听的是否是对象 *如果是对象,就遍历,并且对每个属性进行定义get和set */ functionobserver(obj){ if(typeofobj==='object'){ for(letkeyinobj){ //defineReactive方法设置get和set,见第三步 defineReactive(obj,key,obj[key]); } } }
3.定义一个函数,处理每个属性
functiondefineReactive(obj,key,value){ Object.defineProperty(obj,key,{ get(){ returnvalue; }, set(val){ console.log('数据更新了') value=val; } }) }
ok.到这里初版已经实现了。尝试一下吧
observer(obj); obj.name='haha'
控制台输出:
//数据更新了
以上已经实现设置obj的属性的时候,被监听到,并且可以去执行一些代码了。但是,如果对象里面嵌入了对象呢?比如:
letobj={ name:'jw', age:{ old:60 } }
执行以下代码
observer(obj); obj.age.old='50'
控制台输出:空
4.对监控的obj进行迭代处理
//修改defineReactive,添加一行代码 functiondefineReactive(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.重写数组的方法
letarr=['push','slice','shift','unshift']; arr.forEach(method=>{ letoldPush=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只是解决了状态变更后,如何触发通知的问题,那要通知谁呢?谁会关心那些属性发生了变化呢?以后再说。
以下完整代码
letobj={ name:'jw', age:{ old:'60' } } //vue数据劫持Observer.defineProperty functionobserver(obj){ if(typeofobj==='object'){ for(letkeyinobj){ defineReactive(obj,key,obj[key]); } } } functiondefineReactive(obj,key,value){ observer(value); Object.defineProperty(obj,key,{ get(){ returnvalue; }, set(val){ console.log('数据更新了') value=val; } }) } observer(obj); //obj.age.old='50' //Object.defineProperty对数组无效 letarr=['push','slice','shift','unshift']; arr.forEach(method=>{ letoldPush=Array.prototype[method]; Array.prototype[method]=function(value){ console.log('数据更新了') oldPush.call(this,value) } }) obj.skill=[1,2,3]; obj.skill.push(4);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。