vue2与vue3实现响应式的原理区别和提升
区别:
vue2.x:
实现原理:
对象类型:Object.defineProperty()对属性的读取,修改进行拦截(数据劫持);
数组类型:通过重写更新数组的一系列方法来进行拦截(对数组的变更方法进行了包裹)
Object.defineProperty(data,"count",{
get(){},
set(){}
})
vue3.0:
实现原理:
实现原理:
不管你是使用的ref还是reactive,底层都是使用proxy实现响应式
通过proxy(代理):拦截对象中任意属性的变化,包括属性的添加,删除,改写等等;
let person = {name:'小卢',age:18}
const p = new Proxy(person,{
// 查
get(target,propName){
// target:原来的对象
// propName:当你读取对象中的哪个数据时,propName就是哪个,例如,你读取person中的name,propName在这里就代表name(对象里面对应的键)
console.log(target,propName)
return target[propName] //因为是变量所有用[]
},
// 增,改
set(target,propName,value){
console.log(target,propName)
// value:你修改的那个新的值
target.propName = value
},
// 删
deleteProperty(target,propName){
return delete target[propName] //删除propName这个属性
}
})
reflect:对源对象进行操作(不详细介绍了,需要的自己可以百度,原理主要是上面那个)
vue2存在常见的问题:
1:新增属性,删除属性,页面不会进行更新,2:直接通过下标修改数组,界面不会自动更新
vue3中则解决了vue2中上述提到的一些问题