响应式
就是修改data属性之后,vue立刻监听到;data属性被代理到vm上
Object.defineProperty
实现数据监听
var obj = {};
var _name = 'zhangsan';
Object.defineProperty(obj, 'name', { // 参数分别为:对象名,对象的属性名,执行的函数
get: function(){
console.log('get',_name); //监听
return _name;
},
set: function(newVal){
console.log('set',newVal); //监听
_name = newVal;
}
})
模拟vue实现监听
var vm = {};
var data = {
name: 'zhangsan',
age: 20
};
var key,value;
for(key in data){
(function(key){
//将data的属性代理到vm上
Object.defineProperty(vm, key, { //为vm定义name和age两个属性
get: function(){
console.log('get',data[key]); //监听
return data[key];
}
set: function(newVal){
console.log('get',newVal); //监听
data[k] = newVal;
}
})
})(key)
}