vue中渲染器原理

虚拟DOM就是用js对象来描述真实DOM结构
h('div','hello')>>>渲染器>>真实DOM
tag:用来描述标签名称
props：是个对象，用来描述标签属性和事件
children:用来描述标签子节点

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
</body>
<script>
  const vnode = {
    tag: 'div',
    props: {
      onClick: () => alert('hello')
    },
    children: 'click me'
  }
  function RenderDom(vnode, container) {
    const el = document.createElement(vnode.tag)
    for (const key in vnode.props) {
      if (/^on/.test(key)) {
        document.addEventListener
        el.addEventListener(key.slice(2).toLowerCase(), vnode.props[key])
      }
    }
    if (typeof vnode.children === 'string') {
      el.appendChild(document.createTextNode(vnode.children))
      // document.createTextNode
      // document.appendChild
    } else if (Array.isArray(vnode.children)) {
      vnode.children.forEach(element => {
        RenderDom(element, el)
      });
    }
    container.appendChild(el)
  }
  RenderDom(vnode, document.body)

</script>

</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

相关阅读:
MongoDB实战之快速开始
python工具方法37 voc数据统计分析(box聚类、box散点图、类别频率统计、box面积统计)
华为云桌面Workspace，让云上工作更高效
K8s Pod亲和性、污点、容忍度、生命周期与健康探测详解（下）
Python 的 Selenium 库进行元素定位时，XPath的详细用法
【Hadoop】HDFS API 操作大全
【论文精读】Attention is all you need
【vue3】匿名插槽，具名插槽，作用域插槽，动态插槽
【C++设计模式之责任链模式:行为型】分析及示例
设计模式之 -- 单例模式

原文地址：https://blog.csdn.net/LRQQHM/article/details/127435670