什么是渲染函数 ？

Vue 允许我们以多种方式构建模板，其中最常见的方式是只把 HTML 与特殊指令和mustache 标签一起用于相响应功能。但是你也可以通过 JavaScript 使用特殊的函数类 （称为渲染函数） 来构建模板。这些函数与编译器非常接近，这意味它们比其他模板类型更高效、快捷。由于你使用 JavaScript 编写渲染函数，因此可以在需要的地方自由使用该语言直接添加自定义函数。

对于标准 HTML 模板的高级方案非常有用。

这里是用 HTML 作为模板 Vue 程序：

new Vue ({
 el: '#app',
 data:{
  fruits: ['Apples','Oranges','Kiwi']
 },
 template:
 `<div>
  <h1>Fruit Basket</h1>
  <ol>
  <li v-for="fruit in fruits">{{ fruit }}</li>
  </ol>
  </div>
 `
});

这里是用渲染函数开发的同一个程序：

new Vue({
 el: '#app',
 data: {
 fruits: ['Apples', 'Oranges', 'Kiwi']
 },
 render: function(createElement) {
 return createElement('div', [
  createElement('h1', 'Fruit Basket'),
  createElement('ol', this.fruits.map(function(fruit) { 
  return createElement('li', fruit); 
  }))
 ]);
 }
});

输出如下：

Fruit Basket

1、Apples 2、Oranges 3、Kiwi

在上面的例子中，我们用了一个函数，它返回一系列 createElement() 调用，每个调用负责生成一个元素。尽管 v-for 指令在基于 HTML 的模板中起作用，但是当时用渲染函数时，可以简单的用标准的 .map() 函数遍历 fruits 数据数组。