vue2:
是通过Object.defineProperty中的get(),set()方法监视和修改view层实现响应式的:
let person = {
name: '貂蝉',
}
let p = {}
Object.defineProperty(p,'name',{
configurable:true,
get(){ //有人读取name时调用
return person.name
},
set(value){ //有人修改name时调用
person.name = value
}
})
vue3:
是通过proxy中的get(),set(),deleteProperty()来对数据进行增删改查,返回是使用Reflect
/* target: 目标对象,待要使用 Proxy 包装的目标对象(可以是任何类型的对象,包括原生数组,函数,甚至另一个代理)。 */
/* handler: 一个通常以函数作为属性的对象,各属性中的函数分别定义了在执行各种操作时代理 proxy 的行为。 */
const proxy = new Proxy(target, handler);
let person = {
name: '张三',
age: 18
}
const p = new Proxy(person, header)
const handler = {
// 拦截判断target对象是否含有属性propName的操作
// target:目标对象
// propName:待拦截属性名
has(target, propName) {
/*
* 做你的操作
*/
return propName in target
},
// 有人读取p的某个属性时调用
// target:目标对象
// propName:待拦截属性名
// receiver: proxy实例
get(target, propName,receiver) {
return Reflect.get(target, propName)
},
// 有人修改p的某个属性、或给p追加某个属性时调用
set(target, propName, value) {
Reflect.set(target, propName, value)
},
//有人删除p的某个属性时调用
deleteProperty(target, propName) {
return Reflect.deleteProperty(target, propName)
}
}