今天看了一下vue到底是怎么实现响应式的,发现特别简单, 就是使用了 Object.defineProperty 这个函数来进行监听,
var vm = {};
var data = {
name: 'zhangsan',
age: 18
}
var key , value;
for ( key in data) {
(function(key) {
Object.defineProperty(vm,key,{
get: function() {
console.log('get');
return data[key];
},
set: function(newValue){
console.log('set');
data[key] = newValue;
}
})
})(key)
}
第一个参数相当于一个vue实例,第二个参数就是data的key,第三个参数就是一个对象,对象中包含了get和set两个函数,分别监听获取和修改
在控制台获取和修改值就会打印出get和set