Vue躬行記（7）——渲染函數和JSX

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

1、渲染函數

　　雖然在大部分場景中，都會選擇直觀而清晰的模板，但遇到一些複雜的場景時，就不得不使用渲染函數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]
    );
  }
});

2、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");
    }
  }
});