ref和reactive实现原理_ref和reactive的原理

67. ref和reactive实现

1. ref 实现原理

当我们调用 ref 函数时，会返回一个包含一个 .value 属性的对象。这个对象会被转换成 Proxy 对象，通过拦截 get 和 set 操作，实现对 .value 属性的监听。当读取 .value 属性时，会触发 get 操作，将 .value 属性的值返回。当修改 .value 属性时，会触发 set 操作，将新的值赋给 .value 属性。

以下是 ref 函数的简单实现：

// 实现 ref 函数
function ref(value) {
  let _value = value;

  const handlers = {
    get(target, key, receiver) {
      if (key === 'value') {
        return _value;
      }
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      if (key === 'value') {
        _value = value;
        return true;
      }
      return Reflect.set(target, key, value, receiver);
    }
  };

  return new Proxy({}, handlers);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2. reactive 实现原理

当我们调用 reactive 函数时，会将传入的普通 JavaScript 对象转换为一个 Proxy 对象，通过拦截 get 和 set 操作，实现对整个对象的监听。当读取对象的属性时，会触发 get 操作，返回对应属性的值。当修改对象的属性时，会触发 set 操作，将新的值赋给对应的属性。

以下是 reactive 函数的简单实现：

// 实现 reactive 函数
function reactive(obj) {
  const handlers = {
    get(target, key, receiver) {
      const value = Reflect.get(target, key, receiver);
      if (typeof value === 'object') {
        return reactive(value);
      }
      return value;
    },
    set(target, key, value, receiver) {
      const result = Reflect.set(target, key, value, receiver);
      return result;
    }
  };

  return new Proxy(obj, handlers);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18