除了可通過模板建立HTML之外，Vue還提供了渲染函式和JSX，前者的編碼自由度很高，後者對於開發過React的人來說會很熟悉。注意，Vue的模板最終都會被編譯成渲染函式。

一、渲染函式

　　雖然在大部分場景中，都會選擇直觀而清晰的模板，但遇到一些複雜的場景時，就不得不使用渲染函式render()了。

1）render()

　　假設有一個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>

　　在模板中，充斥著冗餘的<slot>元素，並且如果要增加分支，那麼還得修改模板，即插入新的條件指令、標題元素和插槽。顯然，在這個場景中不適合用模板，接下來替換成render()函式，程式碼不僅簡潔而且更易維護，如下所示。

Vue.component("page", {
  render: function (createElement) {
    return createElement(
      "h" + this.type,
      this.$slots.default
    );
  },
  props: ["type"]
});

　　render()函式能接收一個createElement()方法，並返回一個VNode。Vue通過虛擬DOM來高效能的變更真實DOM，而VNode是虛擬節點（Virtual Node）的簡寫。例項屬性$slots是一個物件，其鍵是插槽的名稱，可訪問分發給插槽的內容，程式碼中的default是指預設插槽。

　　注意，若render()函式存在，那麼Vue就不會編譯template選項中的模板和從el選項所掛載的元素中提取出的模板，即不會將它們轉換成渲染函式。

2）createElement()

　　該方法可接收3個引數：標籤名稱、資料物件和虛擬子節點。除了標籤名稱必傳之外，其餘兩個引數都是可選的，接下來會對這3個引數進行逐一講解。

　　標籤名稱既可以是一段字串，也可以是一個返回字串的函式。並且由於render()函式可以訪問this，因此標籤名稱還可以是data選項的屬性、計算屬性等，如下所示。

Vue.component("btn", {
  render: function (createElement) {
    return createElement(
      this.tag
    );
  },
  data: function() {
    return { tag: "button" }
  }
});

　　資料物件是一個配置資訊集合，包含了元件所需的屬性以及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");
    }
  }
});

　　Vue還為on選項中的事件提供了與.passive、.capture和.once三個修飾符相對應的字首，如下所示。

on: {
  "&click": this.handler,        //.passive
  "!click": this.handler,        //.capture
  "~click": this.handler         //.once
}

　　虛擬子節點既可以是字串，也可以是陣列，如下所示。注意，如果需要省略資料物件，那麼可直接將虛擬子節點作為第二個引數傳入。

Vue.component("c-article", {
  render: function (createElement) {
    return createElement(
      "div",
      ["標題", createElement("h2", "副標題")]
    );
  }
});

　　官方規定元件樹中的所有VNode必須要唯一，雖然像下面這樣重複引用同一個VNode是不合法的，但是在渲染時並不會報錯，仍然能呈現內容。

Vue.component("c-article", {
  render: function(createElement) {
    var h1 = createElement("h1", "標題");
    return createElement(
      "div",
      [h1, h1]
    );
  }
});

二、JSX

　　如果要在Vue中使用JSX語法，那麼需要先安裝一個Babel外掛，安裝命令如下所示。

npm install @vue/babel-preset-jsx --save-dev

　　在安裝完之後，就可在配置檔案babel.config.js中對其進行配置，如下所示。

module.exports = {
  presets: ["@vue/babel-preset-jsx"]
};

　　經過這一系列的操作後，就能以JSX語法來建立模板，如下所示，為按鈕註冊了點選事件。注意，render()函式的h引數是createElement的別名。

Vue.component("btn", {
  render: function(h) {
    return (<button vOn:click={this.handler}>ok</button>);
  },
  methods: {
    handler: function() {
      console.log("click");
    }
  }
});

　　假設上面的程式碼儲存在default.js檔案中，並且當前處在該檔案的目錄中，執行下面這條編譯命令，會將編譯後的程式碼儲存到當前目錄的dist.js檔案中。

npx babel default.js --out-file dist.js

　　dist.js檔案中的程式碼如下所示，那段JSX程式碼自動轉換成了createElement()方法。

Vue.component("btn", {
  render: function (h) {
    return h("button", {
      "on": {
        "click": this.handler
      }
    }, ["ok"]);
  },
  methods: {
    handler: function () {
      console.log("click");
    }
  }
});

&n