今天看了一下vue到底是怎么实现响应式的,发现特别简单, 就是使用了 Object.defineProperty 这个函数来进行监听,
这是一个demo
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
这样就实现了数据的监听,可以实现响应式了
原文:https://www.cnblogs.com/lilei-site/p/11622192.html