vue3中手写组合API shallowReactive 与 reactive

<!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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

// 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;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

相关阅读:
1.4_29 Axure RP 9 for mac 高保真原型图 - 案例28【中继器-后台管理系统6】功能-原位修改数据
Android之自定义相册文件选择器
Vue3初始化写法
MySQL存储过程
如何用chatgpt写小说
《Head First HTML5 javascript》第9章认识对象
Au 效果器详解：母带处理
Springboot实现websocket（连接前jwt验证token）
Android 接入穿山甲广告
MCE | HIV 衣壳蛋白有望成为 HIV 治疗新靶标

原文地址：https://blog.csdn.net/xinzaitt/article/details/125526971