Vue2响应式原理的实现主要是依靠Object.definePropety()
Vue3的响应式原理的实现主要是依靠proxy和Reflect
Vue2:
通过Object.definePropety()的getter和setter方法,对数据进行响应式处理,但仅限于查询和修改,而增加和删除还是需要额外进行相关的处理。需要使用
this.$set() 或者Vue.set()
Vue3:
在window身上有一个proxy(代理)属性
vue3的实现大概如下
const p =new proxy(源对象,{在这里包含着getter setter 还有deleteProprty })
它可以捕获到数据的增删改查,此时只是捕获了,但是没有对页面数据进行响应式处理。
此时要引入新的东西——Reflect(反射)
Object身上的东西已经逐渐转移到了Reflect身上,而Reflect更好,
例如使用Object.definePropety()
定义一个响应式属性,如果重复定义了会报错,代码量多的时候,我们只能通过try...catch捕获异常,像封装框架类的东西,不太适合使用Object.
使用Reflect.definePropety()
如果重复定义了,后台并不会报错,其实本身Reflect.definePropety()是有返回值的,返回的是布尔值。
总结:
通过proxy(代理):拦截对象中任意属性的变化,包括属性值的读(getter)、添加和修改(setter)、 删除(deletePropety)
通过Reflect(反射):对源对象的属性进行操作
reactive 通过使用Proxy来实现响应式(数据劫持),并通过Reflect操作源对象内部的数据。
在vue3中,定义一个对象,并有响应式数据,都是要通过reactive函数,例如:
setup(){
let p=reactive({name:'xxx',
age:'xxx'
})
function fun(){
console.log(p) //p就是proxy,此时我们就可以联想到上面的原理了
}
}