Vue 定義組件模板的七種方式(一般用單文件組件更好)

在 Vue 中定義一個組件模板，至少有七種不同的方式（或許還有其它我不知道的方式）：

• 字符串
• 模板字面量
• x-template
• 內聯模板
• render 函數
• JSF
• 單文件組件

在這篇文章中，我將通過示例介紹每個選項，並探討利弊。以便你知道在任何特定情況下最適合的是哪一種。

1. 字符串

默認情況下，模板會被定義為一個字符串。我想我們的觀點會達成一致：字符串中的模板是非常難以理解的。除了廣泛的瀏覽器支持之外，這種方法沒有太多用處。

Vue.component('my-checkbox', { template: `<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title"></div></div>`, data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } });

2. 模板字面量

ES6 模板字面量允許你使用多行定義模板，這在常規 JavaScript 字符串中是不被允許的。此方式閱讀體驗更佳，並在許多現代瀏覽器中得到支持，不過安全起見你還是需要把代碼轉換成 ES5 。
這種方法並不完美，我發現大多數 IDE 仍然會通過語法高亮、tab 格式化、換行符等地方的問題折磨着你。

Vue.component('my-checkbox', { template: `<div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"></div> <div class="title"></div> </div>`, data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } });

3. x-template

使用此方法，你的模板被定義在例如 index.html 文件中的 script 標簽里。此 script 標簽使用 text/x-template 標記，並由組件定義的 id 引用。
我喜歡這種方法，它允許你使用適當的 HTML 標記編寫你的 HTML，不過不好的一面是，它把模板和組件定義的其它部分分離開來。

Vue.component('my-checkbox', { template: '#checkbox-template', data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } });

<script type="text/x-template" id="checkbox-template"> <div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"></div> <div class="title"></div> </div> </script>

4. 內聯模板

通過在組件中添加 inline-template 屬性，你可以向 Vue 指示內部內容是其模板，而不是將其視為分布式內容（參考 slot 。
它與 x-templates 具有相同的缺點，不過一個優點是，內容在 HTML 模板的正確位置，因此可以在頁面加載時呈現，而不是等到 JavaScript 運行。

Vue.component('my-checkbox', { data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } });

<my-checkbox inline-template> <div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"></div> <div class="title"></div> </div> </my-checkbox>

5. render 函數

render 函數需要你將模板定義為 JavaScript 對象，這顯然是最詳細和抽象的模板選項。
不過，優點是你的模板更接近編譯器，並允許你使用完整的 JavaScript 功能，而不是指令提供的子集。

Vue.component('my-checkbox', { data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } }, render(createElement) { return createElement( 'div', { attrs: { 'class': 'checkbox-wrapper' }, on: { click: this.check } }, [ createElement( 'div', { 'class': { checkbox: true, checked: this.checked } } ), createElement( 'div', { attrs: { 'class': 'title' } }, [ this.title ] ) ] ); } });

6. JSX

Vue 中最有爭議的模板選項是 JSX，一些開發者認為它丑陋、不直觀，是對 Vue 精神的背叛。JSX 需要你先編譯，因為它不能被瀏覽器運行。
不過，如果你需要完整的 JavaScript 語言功能，又不太適應 render 函數過於抽象的寫法，那么 JSX 是一種折衷的方式。

Vue.component('my-checkbox', { data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } }, render() { return <div class="checkbox-wrapper" onClick={ this.check }> <div class={{ checkbox: true, checked: this.checked }}></div> <div class="title">{ this.title }</div> </div> } });

單文件組件

只要你把構建工具設置的很舒服，單文件組件就是模板選項中的王者。它允許你寫 HTML 標簽定義組件，並且將所有組件定義保留在一個文件中。
盡管它也有一些劣勢：需要預編譯，某些 IDE 不支持 .vue 文件的語法高亮，不過其地位依然難以被撼動。

<template> <div class="checkbox-wrapper" @click="check"> <div :class="{ checkbox: true, checked: checked }"></div> <div class="title"></div> </div> </template> <script> export default { data() { return { checked: false, title: 'Check me' } }, methods: { check() { this.checked = !this.checked; } } } </script>

你還可以通過引入 pug 之類的預處理器，來獲得模板定義的更多可能性。