嗨,各位宝宝,最近还好吗?最近我的生活和工作都有一些事情发生,不管怎样,保持内心平静就好了~
vue3.0将会通过Proxy来替换原本的Object.defineProperty来实现数据响应。so 让我们来看看Proxy是个啥?
语 法
let p = new Proxy(target, handler);
参数
target
用proxy包装的目标对象(可以是任何类型的对象,包括原生数组,函数甚至另一个代理)
ZZZhandle
一个对象,其属性是当执行一个操作时定义代理的行为的函数。 例子:
let handle = {
get: function(target, name){
return name in target ? target[name]:37
}
}
let p = new Proxy({},handle);
p.a = 1
p.b = undefined;
console.log(p.a, p.b); //1 undefined
console.log('c' in p, p.c) //false
简单的数据响应
let onWatch = (obj, setBind, getLogger) =>{
let handler = {
get(target, property, receive){
getLogger(target, property)
if(typeof target[property] === 'object'
&& target[property]!== null){
return new Proxy(target[property],handler)
}else{
return Reflect.get(target,property,receiver)
}
},
set(target, property, receiver) {
setBind(value, property)
return Relect.set(target, property, value)
}
}
return new Proxy(obj, handler)
}
let obj = {a: 1}
let p = onWatch(
obj,
(v,property)=>{
console.log(`监听到属性${property}改变为${v}`)
},
(target, property, value, receiver){
console.log(`'${property}' = ${target[property]}`)
}
)
p.a = 2 // 监听到属性a改变
p.a // 'a' = 2
愿我们有能力不向生活缴械投降---Lin