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);