&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 等。