很多前端 JavaScript 框架,包含但不限于(Angular,React,Vue)都拥有自己的响应式方法,而这些方法其实都是基于监听对象来实现的,这里我们来看看监听对象实现响应式的原理。
Object.defineProperty 监听对象
如果需要监听对象的属性变化,可以使用Object.defineProperty的存储属性描述符的方法来监听。
const obj = {
a: 1,
b: 2,
c: 3
}
// 监听一个属性的变化
Object.defineProperty(obj, 'a', {
set(val) {
console.log('a set', val)
},
get() {
console.log('a get')
return this.a
}
})