proxy-observe 核心代码 自定义实现#

1// 创建响应式
2function reactive(target = {}) {
3  if (typeof target !== 'object' || target == null) {
4    // 不是对象或数组，则返回
5    return target;
6  }
7
8  // 代理配置
9  const proxyConf = {
10    get(target, key, receiver) {
11      // 只处理本身（非原型的）属性
12      const ownKeys = Reflect.ownKeys(target);
13      if (ownKeys.includes(key)) {
14        console.log('get', key); // 监听
15      }
16
17      const result = Reflect.get(target, key, receiver);
18
19      // 深度监听
20      // 性能如何提升的？
21      return reactive(result);
22    },
23    set(target, key, val, receiver) {
24      // 重复的数据，不处理
25      if (val === target[key]) {
26        return true;
27      }
28
29      const ownKeys = Reflect.ownKeys(target);
30      if (ownKeys.includes(key)) {
31        console.log('已有的 key', key);
32      } else {
33        console.log('新增的 key', key);
34      }
35
36      const result = Reflect.set(target, key, val, receiver);
37      console.log('set', key, val);
38      // console.log('result', result) // true
39      return result; // 是否设置成功
40    },
41    deleteProperty(target, key) {
42      const result = Reflect.deleteProperty(target, key);
43      console.log('delete property', key);
44      // console.log('result', result) // true
45      return result; // 是否删除成功
46    },
47  };
48
49  // 生成代理对象
50  const observed = new Proxy(target, proxyConf);
51  return observed;
52}
53
54// 测试数据
55const data = {
56  name: 'zhangsan',
57  age: 20,
58  info: {
59    city: 'beijing',
60    a: {
61      b: {
62        c: {
63          d: {
64            e: 100,
65          },
66        },
67      },
68    },
69  },
70};
71
72const proxyData = reactive(data);