&emsp;&emsp;除了可通过模板创建HTML之外，Vue还提供了渲染函数和JSX，前者的编码自由度很高，后者对于开发过React的人来说会很熟悉。注意，Vue的模板最终都会被编译成渲染函数。 ## 一、渲染函数 &emsp;&emsp;虽然在大部分场景中，都会选择直观而清晰的模板，但遇到一些复杂的场景时，就不得不使用渲染函数render()了。 **1）render()** &emsp;&emsp;假设有一个page组件，它会根据外部传入的type特性，有选择的渲染，其模板如下所示。 ~~~ <script type="text/x-template" id="template"> <h1 v-if="type == 1"> <slot></slot> </h1> <h2 v-else-if="type == 2"> <slot></slot> </h2> <h3 v-else-if="type == 3"> <slot></slot> </h3> </script> <script> Vue.component("page", { template: '#template', props: ["type"] }); </script> ~~~ &emsp;&emsp;在模板中，充斥着冗余的\<slot>元素，并且如果要增加分支，那么还得修改模板，即插入新的条件指令、标题元素和插槽。显然，在这个场景中不适合用模板，接下来替换成render()函数，代码不仅简洁而且更易维护，如下所示。 ~~~ Vue.component("page", { render: function (createElement) { return createElement( "h" + this.type, this.$slots.default ); }, props: ["type"] }); ~~~ &emsp;&emsp;render()函数能接收一个createElement()方法，并返回一个VNode。Vue通过虚拟DOM来高性能的变更真实DOM，而VNode是虚拟节点（Virtual Node）的简写。实例属性$slots是一个对象，其键是插槽的名称，可访问分发给插槽的内容，代码中的default是指默认插槽。 &emsp;&emsp;注意，若render()函数存在，那么Vue就不会编译template选项中的模板和从el选项所挂载的元素中提取出的模板，即不会将它们转换成渲染函数。 **2）createElement()** &emsp;&emsp;该方法可接收3个参数：标签名称、数据对象和虚拟子节点。除了标签名称必传之外，其余两个参数都是可选的，接下来会对这3个参数进行逐一讲解。 &emsp;&emsp;标签名称既可以是一段字符串，也可以是一个返回字符串的函数。并且由于render()函数可以访问this，因此标签名称还可以是data选项的属性、计算属性等，如下所示。 ~~~ Vue.component("btn", { render: function (createElement) { return createElement( this.tag ); }, data: function() { return { tag: "button" } } }); ~~~ &emsp;&emsp;数据对象是一个配置信息集合，包含了组件所需的属性以及DOM元素的特性和属性，例如样式、插槽、ref、自定义指令、事件和props等，下面只列出了数据对象的部分字段。 ~~~ Vue.component("btn", { render: function(createElement) { return createElement(this.tag, { style: { color: "red" }, //与v-bind:style的功能相同 attrs: { id: "btn" }, //DOM元素特性 domProps: { innerHTML: "提交" }, //DOM元素属性 on: { click: this.handler } //事件监听器 }); }, methods: { handler: function() { console.log("click"); } } }); ~~~ &emsp;&emsp;Vue还为on选项中的事件提供了与.passive、.capture和.once三个修饰符相对应的前缀，如下所示。 ~~~ on: { "&click": this.handler, //.passive "!click": this.handler, //.capture "~click": this.handler //.once } ~~~ &emsp;&emsp;虚拟子节点既可以是字符串，也可以是数组，如下所示。注意，如果需要省略数据对象，那么可直接将虚拟子节点作为第二个参数传入。 ~~~ Vue.component("c-article", { render: function (createElement) { return createElement( "div", ["标题", createElement("h2", "副标题")] ); } }); ~~~ &emsp;&emsp;官方规定组件树中的所有VNode必须要唯一，虽然像下面这样重复引用同一个VNode是不合法的，但是在渲染时并不会报错，仍然能呈现内容。 ~~~ Vue.component("c-article", { render: function(createElement) { var h1 = createElement("h1", "标题"); return createElement( "div", [h1, h1] ); } }); ~~~ ## 二、JSX &emsp;&emsp;如果要在Vue中使用JSX语法，那么需要先安装一个Babel插件，安装命令如下所示。 ~~~ npm install @vue/babel-preset-jsx --save-dev ~~~ &emsp;&emsp;在安装完之后，就可在配置文件babel.config.js中对其进行配置，如下所示。 ~~~ module.exports = { presets: ["@vue/babel-preset-jsx"] }; ~~~ &emsp;&emsp;经过这一系列的操作后，就能以JSX语法来创建模板，如下所示，为按钮注册了点击事件。注意，render()函数的h参数是createElement的别名。 ~~~ Vue.component("btn", { render: function(h) { return (<button vOn:click={this.handler}>ok</button>); }, methods: { handler: function() { console.log("click"); } } }); ~~~ &emsp;&emsp;假设上面的代码保存在default.js文件中，并且当前处在该文件的目录中，执行下面这条编译命令，会将编译后的代码保存到当前目录的dist.js文件中。 ~~~ npx babel default.js --out-file dist.js ~~~ &emsp;&emsp;dist.js文件中的代码如下所示，那段JSX代码自动转换成了createElement()方法。 ~~~ Vue.component("btn", { render: function (h) { return h("button", { "on": { "click": this.handler } }, ["ok"]); }, methods: { handler: function () { console.log("click"); } } }); ~~~ ***** > 原文出处： [博客园-Vue躬行记](https://www.cnblogs.com/strick/category/1512864.html) [知乎专栏-Vue躬行记](https://zhuanlan.zhihu.com/pwvue) 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎浏览。  推荐一款前端监控脚本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不仅能监控前端的错误、通信、打印等行为，还能计算各类性能参数，包括 FMP、LCP、FP 等。