vue源码学习之Object.defineProperty对象属性监听
本文介绍了vue源码学习之Object.defineProperty对象属性监听，分享给大家，具体如下：
参考版本vue源码版本：0.11
相关
vue实现双向数据绑定的关键是Object.defineProperty，让我们先来看下这个函数。
在MDN上查看有关Object.defineProperty的解释。
我们先从最简单的开始：
leta={'b':1};
Object.defineProperty(a,'b',{
enumerable:false,
configurable:false,
get:function(){
console.log('b'+'被访问');
},
set:function(newVal){
console.log('b'+'被修改，新'+'b'+'='+newVal);
}
});
a.b=2;//b被修改，新b=2
a.b;//b被访问
这样，我们就能监听对象了！但问题并不仅仅这么简单。。。
我们可能会有对象中属性的值还是对象这种嵌套情况，可以通过递归解决！
在vue源代码文件srcobserveobserver.js中
//观察者构造函数
functionObserver(data){
this.data=data;
this.walk(data);
}
letp=Observer.prototype;
p.walk=function(obj){
letval;
for(letkeyinobj){
//通过hasOwnProperty过滤掉一个对象本身拥有的属性
if(obj.hasOwnProperty(key)){
val=obj[key];
//递归调用循环所有对象出来
if(typeofval==='object'){
newObserver(val);
}
this.convert(key,val);
}
}
};
p.convert=function(key,val){
Object.defineProperty(this.data,key,{
enumerable:false,
configurable:false,
get:function(){
console.log(key+'被访问');
},
set:function(newVal){
console.log(key+'被修改，新'+key+'='+newVal);
if(newVal===val)return;
val=newVal;
}
})
};
letdata={
user:{
name:'zhangsan',
age:14
},
address:{
city:'beijing'
}
}
letapp=newObserver(data);
data.user.name;//user被访问
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。