08-进阶-响应式原理

Huxzhi小于 1 分钟vue3

未完成

响应式原理

Vue2 使用的是 Object.defineProperty Vue3 使用的是 Proxy,对对象做了一个劫持

2.0 的不足

对象只能劫持 设置好的数据,新增的数据需要 Vue.Set(xxx) 数组只能操作七种方法,修改某一项值无法劫持。

reactive 和 effect 的实现

export const reactive = <T extends object>(target:T) => {
    return new Proxy(target,{
        get (target,key,receiver) {
          const res  = Reflect.get(target,key,receiver) as object


          return res
        },
        set (target,key,value,receiver) {
           const res = Reflect.set(target,key,value,receiver)


           return res
        }
    })
}

Vue3  的响应式原理依赖了 Proxy 这个核心 API,通过 Proxy 可以劫持对象的某些操作。