Vue2响应式原理
实现原理:
对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。
数组类型:通过重写更新数组的一系列方法来实现拦截(对数组的变更方法进行了包裹)。
Object.defineProperty(目标对象,要添加的属性名,{
get(){
return xxx //读取数据
}
set(){
//修改数据
}
})
Vue3响应式原理
实现原理:
1.通过Proxy(代理):拦截对象中任意属性的变化,包括:属性值的读写、添加、删除等。
2.通过Reflect(反射):对被代理对象的属性进行操作。
new Proxy(data,{
//拦截读取属性值
get(target,prop){
return Reflect.get(target,prop)
}
//拦截设置属性值或添加新属性
set(target,prop,value){
return Reflect.set(target,prop,value)
}
//拦截删除属性
deleteProperty(target,prop){
return Reflect.deleteProperty(target,prop)
}
})