Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。

基础

让我们深入一个简单的例子，这个例子里 render 函数很实用。假设我们要生成一些带锚点的标题：

  1. <h1>
  2.   <a name="hello-world" href="#hello-world">
  3.     Hello world!
  4.   </a>
  5. </h1>

对于上面的 HTML，你决定这样定义组件接口：

  1. <anchored-heading :level="1">Hello world!</anchored-heading>

当开始写一个只能通过 level prop 动态生成标题 (heading) 的组件时，你可能很快想到这样实现：

  1. <script type="text/x-template" id="anchored-heading-template">
  2.   <h1 v-if="level === 1">
  3.     <slot></slot>
  4.   </h1>
  5.   <h2 v-else-if="level === 2">
  6.     <slot></slot>
  7.   </h2>
  8.   <h3 v-else-if="level === 3">
  9.     <slot></slot>
  10.   </h3>
  11.   <h4 v-else-if="level === 4">
  12.     <slot></slot>
  13.   </h4>
  14.   <h5 v-else-if="level === 5">
  15.     <slot></slot>
  16.   </h5>
  17.   <h6 v-else-if="level === 6">
  18.     <slot></slot>
  19.   </h6>
  20. </script>
  1. Vue.component('anchored-heading', {
  2.   template: '#anchored-heading-template',
  3.   props: {
  4.     level: {
  5.       type: Number,
  6.       required: true
  7.     }
  8.   }
  9. })

这里用模板并不是最好的选择：不但代码冗长，而且在每一个级别的标题中重复书写了 ，在要插入锚点元素时还要再次重复。

虽然模板在大多数组件中都非常好用，但是显然在这里它就不合适了。那么，我们来尝试使用 render 函数重写上面的例子：

  1. Vue.component('anchored-heading', {
  2.   render: function (createElement) {
  3.     return createElement(
  4.       'h' + this.level,   // 标签名称
  5.       this.$slots.default // 子节点数组
  6.     )
  7.   },
  8.   props: {
  9.     level: {
  10.       type: Number,
  11.       required: true
  12.     }
  13.   }
  14. })

看起来简单多了！这样代码精简很多，但是需要非常熟悉 Vue 的实例 property。在这个例子中，你需要知道，向组件中传递不带 v-slot 指令的子节点时，比如 anchored-heading 中的 Hello world!，这些子节点被存储在组件实例中的 $slots.default 中。如果你还不了解，在深入渲染函数之前推荐阅读实例 property API。

节点、树和虚拟 DOM

在深入渲染函数之前，了解一些浏览器的工作原理是很重要的。以下面这段 HTML 为例：

  1. <div>
  2.   <h1>My title</h1>
  3.   Some text content
  4.   <!-- TODO: Add tagline -->
  5. </div>

当浏览器读到这些代码时，它会建立一个“DOM 节点”树来保持追踪所有内容，如同你会画一张家谱树来追踪家庭成员的发展一样。

上述 HTML 对应的 DOM 节点树如下图所示：
image.png
每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样，每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。

高效地更新所有这些节点会是比较困难的，不过所幸你不必手动完成这个工作。你只需要告诉 Vue 你希望页面上的 HTML 是什么，这可以是在一个模板里：

  1. <h1>{{ blogTitle }}</h1>

或者一个渲染函数里：

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

在这两种情况下，Vue 都会自动保持页面的更新，即便 blogTitle 发生了改变。

虚拟 DOM

Vue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM。请仔细看这行代码：

  1. return createElement('h1', this.blogTitle)

createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。

createElement

使用 javaScript 代替模版功能

JSX

函数式组件

模板编译