什么是條件渲染堤结？
在 Vue 中绎狭，有兩種方法可以有條件地渲染應(yīng)用程序的某些部分：v-if 和 v-show灌侣。
條件渲染是控制是否渲染模板代碼的能力治专。我們可以使用應(yīng)用程序的當(dāng)前狀態(tài)來實(shí)現(xiàn)這一點(diǎn)卖陵。
讓我們看一個(gè)例子。假設(shè)我們正在創(chuàng)建一個(gè)表單张峰，如果密碼長(zhǎng)度小于6個(gè)字符泪蔫，我們希望顯示一條無效的輸入錯(cuò)誤消息。
<tempalte>
<div>
{{ email }} {{ password }}
<p><input type="text" placeholder="Email" v-model="email" /></p>
<p><input type="pass" placeholder="pass" v-model="pass" /></p>
<p class="error-message" v-if="pass.length < 6">密碼必須至少為6個(gè)字符</p>
</div>
</template>
<script setup>
import { ref } from 'vue'
const email = ref('')
const password= ref('')
</script>
在本例中喘批，我們使用 v-if 指令撩荣，然后傳入一個(gè)布爾語句铣揉，如果語句為 true，渲染元素婿滓。如果為 false老速，則不會(huì)渲染。
回到例子凸主，我們將 v-if 替換為 v-show：
<p class="error-message" v-show="pass.length < 6">密碼必須至少為6個(gè)字符</p>
可以看到，它們有同樣效果额湘，但它們的工作方式是不同的卿吐。
v-if 和 v-show 有什么區(qū)別？
關(guān)鍵區(qū)別在于 v-if 有條件地渲染元素锋华，而 v-show 有條件地顯示元素嗡官。
這意味著 v-if 在切換條件時(shí)實(shí)際上會(huì)銷毀和重新創(chuàng)建元素。同時(shí)毯焕，v-show 將始終將元素保留在 DOM 中衍腥，并且只會(huì)通過更改其 CSS 來切換其顯示。
<template>
<div>
<p v-if="active">使用 v-if</p>
<p v-show="active">使用 v-show</p>
<button @click="active = !active">切換狀態(tài)</button>
</div>
</template>
<script setup>
import { ref } from 'vue'
const active= ref(false)
</script>
當(dāng)我們的元素被顯示時(shí)纳猫，DOM 看起來像這樣婆咸。
當(dāng)我們按下按鈕時(shí)，DOM 看起來像這樣芜辕。
可以看到尚骄，使用 v-if，條件塊已從 DOM 中完全刪除侵续。但是對(duì)于 v-show倔丈，它 display 被設(shè)置為 none。
如何選擇状蜗？
經(jīng)常有這么一道面試題需五，問
v-if與v-show的區(qū)別？
回顧上文轧坎，我們知道兩者的共同點(diǎn)都是控制元素顯示和隱藏宏邮。
那他們的不同點(diǎn)呢？這里總結(jié)幾點(diǎn)：
-
v-show控制的是元素的 CSS（display）眶根；v-if是控制元素本身的添加或刪除蜀铲。 -
v-show切換的時(shí)候不會(huì)觸發(fā)組件的生命周期。v-if由false變?yōu)?true會(huì)觸發(fā)組件的beforeCreate属百、create记劝、beforeMount、mounted鉤子（跟組件的初始化執(zhí)行的鉤子一致）族扰，由true變?yōu)?false會(huì)觸發(fā)組件的beforeDestory厌丑、destoryed鉤子定欧。
如果以性能為準(zhǔn)則：
-
v-if具有更高的切換成本（每當(dāng)條件更改時(shí)） -
v-show具有更高的初始渲染成本。
因此怒竿，如果您需要頻繁切換某些內(nèi)容砍鸠，請(qǐng)使用 v-show。如果條件在運(yùn)行時(shí)變化不那么頻繁耕驰，請(qǐng)使用 v-if爷辱。
另一件要考慮的事情是使用 v-if 允許我們將其他邏輯塊與它結(jié)合使用。具體來說朦肘，我們可以使用 v-else 和 v-else-if 塊來真正將高級(jí)邏輯構(gòu)建到我們的應(yīng)用程序中饭弓。
<template>
<p v-if="active">使用 v-if</p>
<p v-else-if="true">else if</p>
<p v-else>else</p>
</template>
