Vue.js 學習旅程Mile 4 – 模板語法之一：Mustache 語法

前言

我在一開始學習 Vue 時，是直接進入最常見的指令，例如：v-text、v-html，所以一直以為 {{ mustache }} 等同於 v-text (汗)....，直到後面學習 methods、computed 等語法{{ mustache }} 又出現時，就被搞混了。因此這次為了撰寫文章而重新學習，回頭看了官方文件說明，才更了解 {{ mustache }} 的用法 與 Vue 的運作。

模板語法 Template Syntax

Vue.js 使用了基於 HTML 的模板語法，讓開發者能聲明式地把 DOM 綁定至底層 Vue 實例的數據(Vue instance’s data)。所有 Vue.js 的模板(templates)都是有效的 HTML，所以能被遵循規範的瀏覽器和 HTML 解析器解析。

在底層的實現上，Vue 將模板編譯(compiles)成虛擬 DOM 渲染函數(Virtual DOM render functions)。結合響應式系統(reactivity system)，Vue 能夠智能地計算出最少需要重新渲染多少組件，並把 DOM 操作次數減到最少。

模板 Template

• 模板會經由 Compiler 編譯為 Render Function。
• Watcher：每個 Vue 實例都有相對應的 Watcher，作用是在 Vue 實例的 data 資料有更新時，會觸發 re-render 重新渲染。
• Render Function 會生成 Virtual DOM Tree 。
• 對比新舊 Virtual DOM Tree 的不同，收集差異，最後將差異用到真實的 DOM Tree

Vue 模板語法分為三種

1. 插值 Interpolations，即 {{ mustache }} 語法
2. 指令 Directives，如：v-text、v-bind 等，以 v- 為前綴詞的特殊屬性
3. 縮寫 Shorthands

Mustache 語法

文字 Text

最常見使用 {{ mustache }} 語法的就是文字插植

<span>Message: {{ msg }}</span>

只要綁定的資料對象上 msg 屬性發生了改變，插值處的內容就會更新。

單次綁定 v-once

加上 v-once 這個指令，可以讓 {{ mustache }} 語法只渲染一次

<span v-once>This will never change: {{ msg }}</span>

JavaScript 陳述式（JavaScript Expressions）

{{ mustache }} 語法除了可以直接使用實體中的屬性外，我們也可以使用 JavaScript 的陳述式寫一些運算或判斷。例如：

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

限制

使用 JavaScript 陳述式的限制是，每個綁定都只能包含單個表達式，所以下面的例子都不會生效。

<!-- 這是語句　statement，不是表達式 expression　-->
{{ var a = 1 }}

<!-- 流程控制也不會生效，請使用三元表達式 -->
{{ if (ok) { return message } }}

{{ mustache }} 語法的 JavaScript 陳述式雖然好用，但是由於不可復用及較差的可讀性，通常在開發時會用 computed 或是 methods 取代

參考資料

• Vue.js Guide: Template Syntax
• Vue.js Core 30天屠龍記(第5天): 模板語法 Part 1 - Mustache 標籤
• |D6| 從原始碼看 Vue 渲染機制 (4) - render

結語

藉由這次整理的筆記，才讓我對 {{ mustache }} 這位鬍子先生有了更清楚的認識，這樣每次見面時總算能熟識地打招呼，而非呼嚨地躲過惹(笑)。