Vue.js使用v-show和v-if的注意事項(xiàng)

在切換 v-if 塊時(shí)，Vue.js 有一個(gè)局部編譯/卸載過(guò)程，因?yàn)?v-if 之中的模板也可能包括數(shù)據(jù)綁定或子組件。v-if 是真實(shí)的條件渲染，因?yàn)樗鼤?huì)確保條件塊在切換當(dāng)中合適地銷(xiāo)毀與重建條件塊內(nèi)的事件監(jiān)聽(tīng)器和子組件。

v-if 也是惰性的：如果在初始渲染時(shí)條件為假，則什么也不做——在條件第一次變?yōu)檎鏁r(shí)才開(kāi)始局部編譯（編譯會(huì)被緩存起來(lái)）。

相比之下，v-show 簡(jiǎn)單得多——元素始終被編譯并保留，只是簡(jiǎn)單地基于 CSS 切換。

一般來(lái)說(shuō)，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變 v-if 較好。

下面通過(guò)示例來(lái)看看在使用v-show與v-if時(shí)的注意事項(xiàng)

1、通過(guò)Vue.js中v-if指令來(lái)判斷Vue中某個(gè)對(duì)象是否為空（該對(duì)象與后臺(tái)傳來(lái)的json數(shù)據(jù)綁定），從而判斷是否顯示分頁(yè)條，在實(shí)際過(guò)程中發(fā)現(xiàn)，第一次請(qǐng)求后臺(tái)數(shù)據(jù)，進(jìn)行渲染過(guò)程后，分頁(yè)條沒(méi)有顯示，但之后的請(qǐng)求后臺(tái)數(shù)據(jù)再渲染，分頁(yè)條都可正常顯示。

問(wèn)題如圖所示：

2、原因

查看頁(yè)面未渲染dom結(jié)構(gòu)，發(fā)現(xiàn)上述分頁(yè)條所在的div，沒(méi)有出現(xiàn)頁(yè)面中，這是由于vue組件初始化時(shí)，由于list為空導(dǎo)致id為example的div刪除了，所以后續(xù)分頁(yè)操作，針對(duì)是空dom對(duì)象，在第一次渲染結(jié)束后，由于list不為空，該div又加到該節(jié)點(diǎn)上，所以而后的分頁(yè)條都可正常顯示。

3、解決

將v-if指令替換為v-show指令，在條件為真的情況下，v-if將其所在dom及其子dom都刪除，而v-show是將該dom加上了“display：none”，使其隱藏了起來(lái)。修改代碼及效果如下

使用心得：

對(duì)于V-show，V-if如何選擇，本人有以下建議：

1、對(duì)于管理系統(tǒng)的權(quán)限列表的展示，這里可以使用V-if來(lái)渲染，如果使用到V-show，對(duì)于用戶(hù)沒(méi)有的權(quán)限，在網(wǎng)頁(yè)的源碼中，仍然能夠顯示出該權(quán)限，如果用V-if，網(wǎng)頁(yè)的源碼中就不會(huì)顯示出該權(quán)限。（在前后臺(tái)分離情況下，后臺(tái)不負(fù)責(zé)渲染頁(yè)面的場(chǎng)景。）
2、對(duì)于前臺(tái)頁(yè)面的數(shù)據(jù)展示，這里推薦使用V-show，這樣可以減少開(kāi)發(fā)中不必要的麻煩。

總結(jié)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com