最近在学习vue数据绑定的原理,vue2.0版本使用了Object.defineProperty方法。对于Object类型的数据来说,就是在getter中收集依赖,在setter中触发依赖。通过getter和setter,我们可以在读取一个变量或给一个变量赋值时去做一些其他的事情。所以对于标题描述的问题,一个思路就是在getter中每获取一次值,就使其加一。
const defineFun = (obj, key, val) => {
Object.defineProperty(obj, key, {
set(newVal) {
val = newVal
console.log('set a', val)
},
get() {
console.log('get a', val)
return val++ // 返回值+1
}
})
}
defineFun(window, 'a', 1)
console.log(a === 1 && a === 2 && a === 3) // true
a = 51
console.log(a === 51 && a === 52 && a === 53) // true
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。