第九章 render函数（进阶篇）

Vue.js 2.x与vue.js 1.x最大的区别就在于2.x使用了Virtual Dom(虚拟Dom)来更新Dom节点，提升渲染性能。
虽然前面章节我们的组件模板都是写在template选项里的，但是在Vue.js编译时，都会解析为Virtual Dom。
本章我们就来探索Vue.js用于实现Virtual Dom的Render函数语法，在介绍Render函数前，我们先来看看什么是Virtual Dom。

---

9.1什么是Virtual Dom

React和Vue2都使用了Virtual Dom技术，Virtual Dom并不是真正意义上的Dom，而是一个轻量级的JavaScript对象，在状态发生变化时，Virtual Dom会进行Diff运算，来更新只需要被替换的DOM，而不是全部重绘。
与DOM操作相比，Virtual Dom是基于JavaScript计算的，所以开销会小很多。
正常的DOM节点在HTML中是这样的：

<div id="main">
  <p>文本内容</p>
  <p>文本内容</p>
</div>

用Virtual Dom创建的JavaScript对象一般会是这样的：

var vNode ={
     tag:'div',
    attributes:{
        id:'main'
    },
    children:{
        //p节点
    }
}

vNode对象通过一些特定的选项描述了真实的DOM结构。
在Vue.js2中，Virtual Dom就是通过一种VNode类表达的，每个DOM元素或组件都对应一个VNode对象.
VNode主要可以分为以下几类：

• EmptyVNode
• ComponentVNode
• TextVNode
• ElementVNode
• CloneVNode
  使用Virtual Dom就可以完全发挥JavaScript的能力。在多数场景下，我们使用template就足够了，但在一些特定的场景下，使用Virtual Dom会更简单，下节我们来介绍Vue的Render函数的用法。

---

9.2什么是render函数

Render函数通过createElement参数来创建Virtual Dom，结构精简，代码少且清晰，这里使用了一个demo实例来说明，我未对实例进行摘抄，我们只有清楚Render函数所有神奇的地方都在这个createElement里就可以了，我们在下一节来详细介绍它的详细配置和用法。

---

9.3createElement用法

9.3.1 基本参数

由于对render函数的不熟悉与学习render函数的兴趣下降，于是，到此先暂时越过这一章节。

本节略！