vue3响应式

西瓜皮儿 2023/9/15

Dep：是观察者模式设计核心，响应式通知依赖
reactive：由于vue3 reactive只能接收对象，且同时切换成了Proxy做响应式，所以reactive兼顾vue2的observe功能
watch：执行一遍数据获取更新并收集依赖
updateFn：首次render/收集依赖的标志

<!DOCTYPE html>
<html>
  <head>
    <title>vue3响应式</title>
  </head>
  <body>
    <input type="text" id="input" />
    <h1 id="showEl"></h1>
    <h1 id="showEl2"></h1>

    <script>
      const input = document.querySelector("#input");
      const showEl = document.querySelector("#showEl");
      const showEl2 = document.querySelector("#showEl2");

      class Dep {
        dependArr = [];
        depend(fn) {
          if (this.dependArr.includes(fn)) {
            return;
          }
          this.dependArr.push(fn);
        }
        notify() {
          this.dependArr.forEach((fn) => fn());
        }
      }
      const reactive = (obj) => {
        const dep = new Dep();
        return new Proxy(obj, {
          get(obj, key) {
            if (updateFn) {
              dep.depend(updateFn);
            }
            return obj[key];
          },
          set(obj, key, val) {
            obj[key] = val;
            dep.notify();
          },
        });
      };

      let updateFn = null;
      const watch = (fn) => {
        updateFn = fn;
        updateFn();
        updateFn = null;
      };

      // 使用
      const data = reactive({
        text: "",
      });
      const update = () => {
        showEl.innerText = data.text;
        showEl2.innerText = data.text;
      };
      watch(update);
      input.addEventListener("input", (e) => {
        const v = e.target.value;
        data.text = v;
      });
    </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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66