08-进阶-响应式原理
小于 1 分钟
未完成
响应式原理
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 可以劫持对象的某些操作。