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>

这样数组中修改了 我们能拦截到了。