组件的本质

2022/6/26 vuejs虚拟Dom

虚拟Dom其实就是用来描述真实Dom普通的js对象，虚拟Dom除了能描述真实Dom还能够描述组件

<body>
    <script>
      // 普通虚拟DOM对象
      const vnode = {
        tag: "div",
        props: {
          onclick: () => alert("徐涛"),
        },
        children: "123",
      };
      // 组件
      const MyCompoent = function () {
        return {
          tag: "div",
          props: {
            onclick: () => alert("徐涛"),
          },
          children: [
            {
              tag: "span",
              props: {
                onclick: () => alert("真帅"),
              },
              children: "xu",
            },
          ],
        };
      };
      // 使用组件的对象
      const vnodes = {
        tag: MyCompoent,
      };
      // 渲染器
      function render(vnode, co) {
        const el = document.createElement(vnode.tag);
        for (const key in vnode.props) {
          if (/^on/.test(key)) {
            el.addEventListener(key.substr(2).toLowerCase(), vnode.props[key]);
          }
        }
        if (typeof vnode.children === "string") {
          el.appendChild(document.createTextNode(vnode.children));
        } else if (Array.isArray(vnode.children)) {
          vnode.children.forEach((v) => {
            render(v, el);
          });
        }
        co.appendChild(el);
      }
      // 组件渲染
      function renderer(vnode, el) {
        const subtree = vnode.tag();
        estimate(subtree, el);
      }
      // 用来判断是普通的虚拟Dom对象 还是组件
      function estimate(v, el) {
        if (typeof v.tag === "string") {
          render(v, el);
        } else if (typeof v.tag === "function") {
          renderer(v, el);
        }
      }
      estimate(vnodes, document.body);
    </script>
  </body>

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

其实上面的代码思路还是很好理解的首先创建两个对象一个是普通虚拟Dom节点对象vnode 另一个是组件对象 MyCompoent 然后调用用来判断是普通的虚拟Dom 还是组件的方法 estimate 如果是普通的虚拟Dom 那么直接调用渲染器render渲染如果是组件那么进入renderer方法里调用组件方法 renderer方法里的代码意思是把方法赋值给一个变量然后调用渲染器render渲染。递归组件不一定一定是方法还有可能是对象

<body>
    <script>
      const vnode = {
        tag: "div",
        props: {
          onclick: () => alert("徐涛"),
        },
        children: "123",
      };
      const MyCompoent = {
        render() {
          return {
            tag: "div",
            props: {
              onclick: () => alert("徐涛"),
            },
            children: [
              {
                tag: "span",
                props: {
                  onclick: () => alert("真帅"),
                },
                children: "xu",
              },
            ],
          };
        },
      };
      const vnodes = {
        tag: MyCompoent,
      };
      function render(vnode, co) {
        const el = document.createElement(vnode.tag);
        for (const key in vnode.props) {
          if (/^on/.test(key)) {
            el.addEventListener(key.substr(2).toLowerCase(), vnode.props[key]);
          }
        }
        if (typeof vnode.children === "string") {
          el.appendChild(document.createTextNode(vnode.children));
        } else if (Array.isArray(vnode.children)) {
          vnode.children.forEach((v) => {
            render(v, el);
          });
        }
        co.appendChild(el);
      }
      function renderer(vnode, el) {
        const subtree = vnode.tag.render();
        estimate(subtree, el);
      }
 
      function estimate(v, el) {
        if (typeof v.tag === "string") {
          render(v, el);
        } else if (typeof v.tag === "object") {
          renderer(v, el);
        }
      }
      estimate(vnodes, document.body);
    </script>
  </body>

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

您说的对

Choose mode

组件的本质

组件的本质