vue3中手写组合API shallowReactive 与 reactive

最新推荐文章于 2023-11-19 11:41:55 发布

ICPunk

最新推荐文章于 2023-11-19 11:41:55 发布

阅读量220

点赞数

分类专栏： vue3 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/xinzaitt/article/details/125526971

版权

vue3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!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 src="./index.js"></script>
    <script type="text/javascript">
      const proxyUser1 = shallowReactive({
        name: "明月",
        car: {
          color: "white",
        },
      });
      // 拦截到了写的数据
      // proxyUser1.name = "明星";
      // 拦截到了读和写的数据
      // proxyUser1.name += "==";
      // 拦截到了读取数据，但是拦截不到写数据
      // proxyUser1.car.color += "==";
      // 拦截到了删除数据
      // delete proxyUser1.name;
      // 只拦截到了读，但是拦截不到删除
      //  delete proxyUser1.car.color;
      const proxyUser2 = reactive({
        name: "明月",
        car: {
          color: "white",
        },
      });
      // 拦截到了写的数据
      // proxyUser2.name = "明星";
      // 拦截到了读和写的数据
      // proxyUser2.name += "==";
      // 拦截到了读取数据和写数据
      // proxyUser2.car.color = "==";
      // 拦截到了删除数据
      // delete proxyUser2.name;
      // 拦截到了读和拦截到了删除
      delete proxyUser2.car.color;
    </script>
  </body>
</html>

// shallowReactive(浅的劫持，浅的监视，浅的响应数据) 与 reactive（深的）

// 定义一个reactiveHandler处理对象
const reactiveHandler = {
  //获取属性值
  get(target, prop) {
    const result = Reflect.get(target, prop);
    console.log("拦截了读取数据", prop, result);
    return result;
  },
  // 修改属性值或者添加属性
  set(target, prop, value) {
    const result = Reflect.set(target, prop, value);
    console.log("拦截了修改数据或者是添加属性", prop, value);
    return result;
  },
  // 删除某个属性
  deleteProperty(target, prop) {
    const result = Reflect.deleteProperty(target, prop);
    console.log("拦截了删除数据", prop);
    return result;
  },
};
// 定义一个shallowReactive函数，传入一个目标对象
function shallowReactive(target) {
  // 判断当前的目标对象是不是object类型（对象/数组）
  if (target && typeof target === "object") {
    return new Proxy(target, reactiveHandler);
  }
  // 如果传入的数据是基本类型的数据，那么就直接返回
  return target;
}
// 定义一个reactive函数，传入一个目标对象
function reactive(target) {
  // 判断当前的目标对象是不是object类型（对象/数组）
  if (target && typeof target === "object") {
    // 对数组或者是对象中所有的数据进行reactive的递归处理
    // 每一层都应该有个代理对象
    // 先判断当前的数据是不是数组，因为数组和对象的操作方式不同
    if (Array.isArray(target)) {
      // 对数组中的数据做一个循环遍历的操作，如果数组中的数据还是对象
      // 或者数组的话就需要进行递归操作了
      // 数组的数据要进行遍历操作
      target.forEach((item, index) => {
        target[index] = reactive(item);
      });
    } else {
      // 再判断当前的数据是不是对象
      // 对象的数据也要进行遍历的操作
      Object.keys(target).forEach((key) => {
        target[key] = reactive(target[key]);
      });
    }
    return new Proxy(target, reactiveHandler);
  }
  // 如果传入的数据是基本类型的数据，那么就直接返回
  return target;
}