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

相关阅读:
第三届云原生编程挑战赛正式启动，Serverless 赛道邀你参加！
CSS基础
nodejs+vue养老人员活体鉴权服务系统elementui
【PHP设计模式07】桥接模式（桥梁模式）
systemctl管理kafka和zookeeper
【python随笔】-深入理解装饰器
原来.NET写的Linux桌面这么好看？
K8S（七）：关于Volume，PersistentVolume（PV），persistentVolumeClaim（PVC）
tinymce富文本编辑器【tip】
安防行业集团采购管理系统：全程数字化采购执行，规范化企业采购业务流程

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