学习Vue3 reactive的源码,用最简单的方式理解如何为Map集合添加响应性。
track和trigger的具体实现方法不在此描述范围内。
const instrumentation = {
get: function (key) {
let target = this['raw']
track()
return target.get(key)
},
set: function (key, value) {
let target = this['raw']
target.set(key, value)
trigger()
}
}
const handler = {
get (target, key, receiver) {
if (key === 'raw') return target
return Reflect.get(Object.prototype.hasOwnProperty.call(instrumentation, key) && key in target ? instrumentation : target, key, receiver)
}
}
let m = new Map()
let p = new Proxy(m, handler)
p.set('mm', 'mmmm')
console.log(p.get('mm'))