这是 vue2
采取数据监听的方式
function defineReactive(target, key, value) {
//深度监听
observer(value)
Object.defineProperty(target, key, {
get() {
return value
}
})
}
这是 vue3
采取数据监听的方式,在 get
中才去监听
// reactive 中有 Proxy 操作
const handler = {
get: function (obj, prop) {
const res = Reflect.get(obj, prop)
if (typeof res === 'object') {
return reactive(res, handler)
}
return res
}
}
const p = reactive(bigData, handler)
vue3
为了避免多次 get
导致的多次递归,在 reactive
中会判断是否已经被代理过,如果是会直接返回对象
那 vue2
为什么不这么做,反而是直接在代理属性时就选择数据监听,如果选择在 get
中,当数据被访问时再递归子对象/数组,这样不就不会有递归的性能问题了吗?
可以看下我的这篇文章
反向操作,用 Object.defineProperty 重写 @vue/reactivity
虽然实际上没多大应用场景,但是可以看看怎么用
defineProperty
实现vue3的