实现 reactive
在 Vue3 中 reactive 会返回一个代理对象,并收集依赖,当代理对象的属性发生改变时,会触发依赖进行更新,在Vue3 中使用 ES6 里的 Proxy 来实现
实现 reactive 的核心逻辑
function reactive (raw) {
return new Proxy(raw, {
get(target, key) {
const res = Reflect.get(target, key)
//TODO 收集依赖
return res
},
set(target, key, value) {
const res = Reflect.set(target, key, value)
// TODO 触发依赖
return res
}
})
}
reactive 会返回一个 Proxy 代理对象,当获取属性的时候会在 getter 中收集依赖,并返回值,当设置属性的时候会在 setter 中触发依赖