在Vue.js中使用v-show指令來根據(jù)變量值的真假條件渲染某些元素，而使用v-if指令則是根據(jù)條件是否滿足來添加或者移除元素，前者在初始渲染時(shí)都是存在于DOM中的。但若在實(shí)際使用當(dāng)中我們需要完全隱藏某個(gè)元素，使其在DOM中不存在，可以使用常見的CSS display:none；來實(shí)現(xiàn)，但在Vue中也提供了類似的解決辦法

<template>
<div v-if="isVisible.value">I am visible</div>
<div v-else>I am INvisible</div>
<div v-show="isShown.value">I am being shown</div>
<div v-show="!isShown.value">I am being hidden</div>
<div v-if="isHidden(value)">I am hidden</div>
</template>
<script>
export default {
data() {
return {
isVisible: { value: true },
isShown: { value: true },
data: {}
}
},
methods: {
isHidden(data) {
return !data.value
}
}
}
</script>

Vue中使用了類似三元運(yùn)算符的語法來實(shí)現(xiàn)內(nèi)部計(jì)算函數(shù)的有效性，它是通過 truefalse（true即顯示，false即隱藏）轉(zhuǎn)為 display:block或display:none;的。Vue將v-if轉(zhuǎn)換為display：none；，基本上所有情況下v-show都比v-if快。同時(shí)，v-show在內(nèi)容更新時(shí)不會(huì)觸發(fā)銷毀/重建過程，因此v-show在運(yùn)行中的性能往往比v-if更佳。

值得注意的是，當(dāng)用v-show設(shè)置為false時(shí)，dom元素仍舊會(huì)在頁面中存在，但是會(huì)為display:none;狀態(tài)，并且頁面空間仍然占據(jù)原來位置的，可以在調(diào)試器中查看。當(dāng)使用 v-if 設(shè)置為 false 時(shí)，dom 元素是不存在的，也就是說不占據(jù)頁面空間的。

最后需要提醒需要遵循良好的開發(fā)習(xí)慣，減少不必要的空間占用。若元素為固定且不需要更新的，使用v-if可以有效降低頁面初次加載時(shí)的dom節(jié)點(diǎn)，即標(biāo)簽元素的數(shù)量；反之若經(jīng)常需要變化的元素應(yīng)使用 v-show 以提升計(jì)算性能，同時(shí)避免頻繁地創(chuàng)建和銷毀 DOM 節(jié)點(diǎn)?？偟膩碚f，需要結(jié)合實(shí)際上下文情況下來使用。