vue2响应式

西瓜皮儿 2023/9/15

class Dep：收集依赖，被reactive调用
reactive：将对象的某一个属性变为可响应式，制作闭包为其存放单独dep对象和值
observe：将对象属性遍历调用reactive
watch：首次添加依赖时调用
updateFn：reactive内作为判断是否是首次渲染的桥梁

<!DOCTYPE html>
<html>
  <head>
    <title>vue2响应式</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());
        }
      }

      // 用watch执行一遍更新函数，添加上依赖
      let updateFn = null;
      const watch = (fn) => {
        updateFn = fn;
        updateFn();
        updateFn = null;
      };
      const reactive = (obj, key) => {
        const dep = new Dep();
        // 重要：避免监听依赖后循环访问对象，将值藏在闭包内
        let val = obj[key];
        Object.defineProperty(obj, key, {
          get() {
            if (updateFn) {
              dep.depend(updateFn);
            }
            return val;
          },
          set(newVal) {
            val = newVal;
            dep.notify();
          },
        });
      };
      const observe = (obj) => {
        const keys = Object.keys(obj);
        for (let key of keys) {
          reactive(obj, key);
        }
      };

      // 使用
      const data = {
        text: "",
      };

      // 更新函数
      const update = () => {
        console.log("update");
        showEl.innerText = data.text;
        showEl2.innerText = data.text;
      };

      // 执行阶段：添加依赖和事件监听
      observe(data);
      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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81