vue中的v-show 和 v-if怎么樣區(qū)分

這篇文章將為大家詳細(xì)講解有關(guān)vue中的v-show 和 v-if怎么樣區(qū)分，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

1. v-show

不管初始的條件是什么，元素總是會(huì)被渲染，并且只是簡(jiǎn)單的基于 CSS display: none 或者 display: block 的屬性進(jìn)行切換。

2. v-if

會(huì)根據(jù)初始的條件（data里自己的定義的數(shù)據(jù)）來(lái)進(jìn)行真正的渲染（組件真正的銷毀和重建），如果條件為真，才會(huì)開(kāi)始渲染條件塊，如果條件為假，則不會(huì)渲染條件塊。

注意： v-if不要和v-for一起使用！

當(dāng)和 v-for 一起使用時(shí)，v-for 的優(yōu)先級(jí)比 v-if 更高，詳見(jiàn) vue官網(wǎng)關(guān)于 v-for 的詳細(xì)描述 ，為什么不能一起使用，以下我用代碼來(lái)解釋一下。

<ul>
 <li
 v-for = "(item, index) in list"
 v-if = "isActive"
 :key = "item.id"
 >
 {{ item.name }}
 </li>
</ul>

以上代碼將會(huì)經(jīng)過(guò)如下運(yùn)算

this.list.map( user=> {
 if (isActive) {
 return user.name
 }
})

因此，哪怕我們只渲染一小部分元素，也得在每次重新渲染的時(shí)候遍歷整個(gè)列表，不論 isActive 是否發(fā)生了變化。如果 list 的數(shù)據(jù)有很多，就會(huì)造成性能低，頁(yè)面可能卡頓的現(xiàn)象出現(xiàn)。

總結(jié)

共同點(diǎn)：

v-if和v-show都是通過(guò)判斷綁定數(shù)據(jù)的true\false來(lái)展示的

不同點(diǎn)：

v-if只有在判斷為true的時(shí)候才會(huì)對(duì)數(shù)據(jù)進(jìn)行渲染，false的時(shí)候把包含的代碼進(jìn)行刪除。除非再次進(jìn)行數(shù)據(jù)渲染，v-if才會(huì)重新判斷?？梢哉f(shuō)是用法比較傾向于對(duì)數(shù)據(jù)一次操作。
v-show是無(wú)論判斷是什么都會(huì)先對(duì)數(shù)據(jù)進(jìn)行渲染，只是false的時(shí)候?qū)?jié)點(diǎn)進(jìn)行display:none;的操作。所以再不重新渲染數(shù)據(jù)的情況下，改變數(shù)據(jù)的值可以使數(shù)據(jù)展示或隱藏。

用法推薦：

v-if更適合于帶有權(quán)限的操作，渲染時(shí)判斷權(quán)限數(shù)據(jù)，有則展示該功能，沒(méi)有則刪除。
v-show更適合于日常使用，可以減少數(shù)據(jù)的渲染，減少不必要的操作。
綜上，v-if 有更高的切換消耗，而 v-show 有更高的初始渲染消耗。
因此，如果需要頻繁切換 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變，更傾向功能權(quán)限性的話 v-if 較好。

關(guān)于vue中的v-show 和 v-if怎么樣區(qū)分就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。