什么是虚拟 DOM ?

什么是虚拟 DOM vnode ？

概念：虚拟 Dom，就是对于真实 dom 的一个 js 对象映射

<div class="wrapper">
    this is div（真实dom）
</div>

那么，虚拟 DOM 是如何变成真实的 DOM 元素的呢？两个词：挂载 => 渲染

示例：

// 下面这个对象就是常说的 虚拟 DOM 对象，本质上就是使用 js 对象去映射描述真实的 dom 对象
<script>
	const vnodeDiv = {
        tag:'div',
        props:{
            class:'wrapper'
        },
        children:'this is div'
    }

	function mount(vnode,dom){
        // 完成 vnode 变成真实的 dom
        const {tag,props,children} = vnode
        // 使用 tag 生成一个 div DOM元素
        const div = document.createElement(tag)  // 创建出来一个 dom 元素
        // 给 div 设置一下 class 属性
        div.setAttribute('class',props.class)
        // 把文本子节点添加到 div 内部
        div.innerText = children
        // 把 div DOM 渲染到 id 为 app 的节点内
        dom.appendChild(div)
    }
    mount(vnodeDiv,document.getElementById('app'))
</script>

---

问：为什么需要一个 vnode？

1.它可以在绝大多数的情况下，比我们直接手动操作 dom 要快，引入 vnode 之后，框架通过 diff 算法可以帮助我们找到最小化的更新方式，提高渲染性能

2.跨平台，原生的 DOM 对象只针对于浏览器，但是如果我们变成了原生的 js，js 对象会更容易被渲染到其他平台，比如原生，服务端