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);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。