virtual dom 虚拟DOM ​

介绍 ​

虚拟 DOM 是对真实 DOM 的抽象，因为真实 DOM 的操作对浏览器的消耗成本是非常高的，而虚拟 DOM 结合 diff 算法，减少 JavaScript 操作真实 DOM 的带来的性能消耗。
举例：极端情况，我们使用 for 循环对一个元素插入一段 dom，假设我们循环10次，那么页面就会回流10次来完成页面渲染，因为浏览器是不知道接下来还有9次需要渲染的。而是用虚拟 dom，将会把这10次 dom 操作合并为一次，再一次性添加到 dom 中。这样就极大减少了 dom 操作。

虚拟 DOM 最大的优势在于抽象了原本的渲染过程，使其不仅仅局限于浏览器，实现了跨平台的能力。

Vue 中的虚拟 DOM ​

• render（渲染函数）：渲染函数是用来生成虚拟DOM的。Vue推荐使用模板来构建应用界面，在底层实现中Vue将模板编译成渲染函数。
• Vnode 虚拟节点：它可以代表一个真实的 dom 节点。通过 createElement 方法将 vnode 节点渲染成 dom 节点。
• patch：虚拟 DOM 最核心的部分，它可以将 vnode 渲染成真实的 DOM ，这个过程是对比新旧虚拟节点之间有哪些不同，然后根据对比结果找出需要更新的的节点进行更新。

render 函数 ​

<h1>{{ blogTitle }}</h1>

<h1>{{ blogTitle }}</h1>

render: function (createElement) {
    return createElement('h1', this.blogTitle)
}

render: function (createElement) {
    return createElement('h1', this.blogTitle)
}