proxy深度监听proxy学习笔记本
首先我们看一下 下面的例子:
<script setup>
const userObj = {
userId: '79Bf46cF-A49b-AdC0-960E-4bE62d75BcfE',
name: '叶娟',
idNumber: '820000198802044574',
userName: '汤伟',
email: 's.qhkax@qq.com',
address: '青海省-张掖市-南区',
linkphone: '15280621228',
city: '澳门特别行政区 离岛 -',
age: 49
}
const userHandler = {
get: function (target, key, receiver) {
console.log(target)
console.log(`获取 ${key} 属性 `)
return Reflect.get(target, key, receiver)
},
set: function (target, key, value, receiver) {
console.log(target)
console.log(`设置 ${key} 属性,值为${value}`)
return Reflect.set(target, key, value, receiver)
}
}
const userProxy = new Proxy(userObj, userHandler)
const click1 = () => {
userProxy.name = '我的新名称是小丫丫'
}
const click2 = () => {
console.log(userProxy.name)
}
</script>
<template>
<div>
{{ userObj }}
</div>
<el-button
type="primary"
@click="click1"
>
修改属性
</el-button>
<el-button
type="primary"
@click="click2"
>
获取属性
</el-button>
</template>
然后我们操作两个按钮以后观察控制台如下。
也是就是是现实了一个基本的对象数据操作拦截。get set。
如果我们把对象更换成一个数组呢是否能顺利的完成拦截呢?
我们改改动代码如下:
查看代码
<template>
<el-button
type="primary"
@click="clickFn"
>
修改
</el-button>
</template>
<script setup>
const ColorList = [
{
label: '测试项目1',
value: '测试项目1'
},
{
label: '测试项目2',
value: '测试项目2'
}
]
const handler = {
get: function (target, key, receiver) {
if (typeof target[key] === 'object') {
return new Proxy(target[key], handler)
}
console.log(target)
console.log(`获取 ${key} 属性 `)
return Reflect.get(target, key, receiver)
},
set: function (target, key, value, receiver) {
console.log(target)
console.log(`设置 ${key} 属性,值为${value}`)
return Reflect.set(target, key, value, receiver)
}
}
const ColorList2 = new Proxy(ColorList, handler)
const clickFn = () => {
ColorList2[0].label = '卡加斯立法解释考虑对方'
}
</script>
<style scoped>
</style>
这样数组中修改了 我们能拦截到了。