# Vue.js 學習旅程Mile 4 – 模板語法之一：Mustache 語法
###### tags: `w3HexSchool` `Vue` `Javascript`

## 前言
我在一開始學習 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 操作次數減到最少。

### 模板


* 模板會經由 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](https://vuejs.org/v2/guide/syntax.html)
* [Vue.js Core 30天屠龍記(第5天): 模板語法 Part 1 - Mustache 標籤](https://ithelp.ithome.com.tw/articles/10202967)
* [|D6| 從原始碼看 Vue 渲染機制 (4) - render](https://ithelp.ithome.com.tw/articles/10218727)

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