相似但不相同的切換方式

課程蹦出了 v-show，這有點在我意料之外（ 沒想到還是在同個話題上 ），其原理跟 v-if 相似，都是在進行 element 的顯示/隱藏。

然而不同於 v-if 的是，從前一篇文章我們知道被移除的 element 是真的整個 HTML Tag 都被毀屍滅跡了，而 v-show 卻只是單純的加上了 css - display:none。

接著以先前的範本做調整，將 template 裡的內容做調整如下（ 沒看錯，就打 mode 相等於 1，延續先前 v-if 的寫法 ）：

<h2 class="text-2xl font-bold text-white" v-show="mode == 1">
  Loves {{ mobilemodel }}
</h2>

接著透過啟用開發面板，可以觀測到在切換不同選項時，h2 這小子就只是一直在 display: none 間切換而已，其原本的 HTML Tag 還活得好好的。

選擇預設的 Mode 1，一切歲月靜好。

切換到 Mode 2，可以看到僅加上 display: none，但整坨 HTML Tag 還存在著。

切換到 Mode 3，還是能看到 h2 就靜靜的在那裝死。

兩者不同之處

其預設值

當回傳值為 true，則預設顯示，相對的，若回傳為 false 則不顯示。

其缺點

1. 無法與 v-else directives 共同相存，所以他只能單獨跟在 v-if, v-else-if 這兩個後面使用，無法利用 v-else 去進行判斷。
2. 還記得前一章使用了 template 這個自己運行的小宇宙嗎？ v-show 不能參與這個快樂的小派對。
3. 由於 HTML tag 只是單純被隱藏而已，所以會一起被渲染出來，故此，在頁面載入時，會花費較多效能。

其優點

缺點也是優點之一的特色是，因為只是單純被隱藏，所以在切換時不需要重新渲染，速度會變得更快，所以是否採用就觀看實務運用的場景如何，應該說要切換顯示與隱藏的內容有多少為主來進行選擇。

再來個小結

由於課程做了重點整理，所以我就順帶的翻譯過來了（ 翻的不是很順，但就我理解盡量表示出意思 ）。

關於v-if

1. 純粹依賴於 condition（ 狀態 ），在這裡我理解為 “判斷狀態” 存在，所以能夠不斷地進行不同的 “判斷狀態” 進行切換，如 v-else-if, v-else 等。
2. 可以當帶頭的，也就是後面直接加 v-else 進行簡單的 “判斷狀態”。
3. 可以使用 template 自成一個小宇宙在內部渲染。
4. 由於是 "lazy" 的渲染，所以對於在頁面載入來說會更有效率，因為瀏覽器不需要等待其它 element 的渲染，使用 v-if，對瀏覽器而言，其它的 element 都是等待被加入的新資料 （ 應該是這個意思吧 ）。
5. 承上，也因為這個特性，所以在 toggle（ 切換 ）時會更花費效能，每次都是動態的重新對伺服器發出請求去拿資料出來渲染，所以建議使用在比較少的資源要求上，不要一次請求一坨資料，因為這樣會變得非常慢。

如何抉擇（ 大人不能都不做選擇 ）

• 當資料很少、很難得需要被切換的時候，使用 v-if。
• 當資料很多、很經常需要被切換的時候，使用 v-show。

最後，提出官方網站的說明，在終於確定要進入新章節之前，歡迎詳細看看。