最简化理解Vue3如何实现Map集合的reactive响应式

1,063 阅读1分钟

学习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'))