## 一、概述 Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力，或者用模板创建过于繁琐和冗长。这时你可以用**渲染函数**，它比模板更接近编译器。 ## 二、举例 用模板渲染的： ``` <script type="text/x-template" id="anchored-heading-template"> <h1 v-if="level === 1"> <slot></slot> </h1> <h2 v-else-if="level === 2"> <slot></slot> </h2> <h3 v-else-if="level === 3"> <slot></slot> </h3> <h4 v-else-if="level === 4"> <slot></slot> </h4> <h5 v-else-if="level === 5"> <slot></slot> </h5> <h6 v-else-if="level === 6"> <slot></slot> </h6> </script> // 定义 Vue.component('anchored-heading', { template: '#anchored-heading-template', props: { level: { type: Number, required: true } } }) ``` 用渲染函数的： ``` Vue.component('anchored-heading', { render: function (createElement) { return createElement( 'h' + this.level, // 标签名称 this.$slots.default // 子节点数组 ) }, props: { level: { type: Number, required: true } } }) ``` ## 三、虚拟DOM Vue 通过建立一个**虚拟 DOM**来追踪自己要如何改变真实 DOM。 ``` return createElement( 'h' + this.level, // 标签名称 this.$slots.default // 子节点数组 ) ``` `createElement`就创建了一个虚拟节点（VNode)； ## 四、createElement ``` // @returns {VNode} createElement( // {String | Object | Function} // 一个 HTML 标签名、组件选项对象，或者 // resolve 了上述任何一种的一个 async 函数。必填项。 'div', // {Object} // 一个与模板中属性对应的数据对象。可选。 { // (详情见下一节) }, // {String | Array} // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成， // 也可以使用字符串来生成“文本虚拟节点”。可选。 [ '先写一些文字', createElement('h1', '一则头条'), createElement(MyComponent, { props: { someProp: 'foobar' } }) ] ) ``` ## 五、JSX 在 Vue 中使用 JSX 语法，它可以让我们回到更接近于模板的语法上。可以参考： [JSX](../标准扩展/javascript/TypeScript/JSX.md) ``` import AnchoredHeading from './AnchoredHeading.vue' new Vue({ el: '#demo', render: function (h) { return ( <AnchoredHeading level={1}> <span>Hello</span> world! </AnchoredHeading> ) } }) ``` >[danger] 将`h`作为`createElement`的别名是 Vue 生态系统中的一个通用惯例，实际上也是 JSX 所要求的。