vue3中:
通过Proxy(代理):拦截对data任意属性的任意(13种)操作,包括属性值的读写,属性的添加,属性的删除等...
通过Reflect(反射):动态对被代理对象的相应属性进行特定的操作
vue2中响应式的缺点:
对象直接新添加的属性或删除已有属性,界面不会自动更新,vue3中不存在
对象直接新添加的属性或删除已有属性,界面不会自动更新,vue3中不存在
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>玉树凌风美少年,揽镜自顾夜不眠</title>
</head>
<body>
<script>
const user={
name:'jeff',
age:20,
wife:{
name:'keira',
age:30
}
}
//target:目标对象即对象,property:属性名或Symbol,value:新属性,receiver:通常是proxy本身,但handler的set方法也有可能在原型链上,或以其他方式被间接地调用(因此不一定是proxy本身)
const proxyUser=new Proxy(user,{
get(target, property,receiver){
console.log('get劫持')
return Reflect.get(target,property);
},
set(target, property, value, receiver){
console.log('set劫持')
return Reflect.set(target, property, value, receiver)
}
})
console.log(proxyUser.name);
proxyUser.wife.name='赵' //只能劫持第一层,第二层劫持需要循环遍历,参考vue2中的循环遍历原理
console.log(proxyUser.wife.name)
</script>
</body>
</html>
174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
