教育行業(yè)A股IPO第一股(股票代碼 003032)

全國(guó)咨詢/投訴熱線:400-618-4000

v-show和v-if指令的共同點(diǎn)和不同點(diǎn)?【面試常問(wèn)】

更新時(shí)間:2021年09月30日18時(shí)30分 來(lái)源:傳智教育 瀏覽次數(shù):

v-show和v-if指令的共同點(diǎn)和不同點(diǎn)?

1、相同點(diǎn):

v-show和v-if都能控制元素的顯示和隱藏。

2、不同點(diǎn):

(1)實(shí)現(xiàn)本質(zhì)方法不同

v-show本質(zhì)就是通過(guò)設(shè)置css中的display設(shè)置為none,控制隱藏

v-if是動(dòng)態(tài)的向DOM樹(shù)內(nèi)添加或者刪除DOM元素

(2)編譯的區(qū)別

v-show其實(shí)就是在控制css

v-if切換有一個(gè)局部編譯/卸載的過(guò)程,切換過(guò)程中合適地銷毀和重建內(nèi)部的事件監(jiān)聽(tīng)和子組件

(3)編譯的條件

v-show都會(huì)編譯,初始值為false,只是將display設(shè)為none,但它也編譯了

v-if初始值為false,就不會(huì)編譯了

(4)性能比較

v-show只編譯一次,后面其實(shí)就是控制css,而v-if不停的銷毀和創(chuàng)建,故v-show性能更好一。

3、注意點(diǎn):

因?yàn)関-show實(shí)際是操作display:" "或者none,當(dāng)css本身有display:none時(shí),v-show無(wú)法讓顯示

4、總結(jié)(適用場(chǎng)景):

如果要頻繁切換某節(jié)點(diǎn)時(shí),使用v-show(無(wú)論true或者false初始都會(huì)進(jìn)行渲染,此后通過(guò)css來(lái)控制顯示隱藏,因此切換開(kāi)銷比較小,初始開(kāi)銷較大),如果不需要頻繁切換某節(jié)點(diǎn)時(shí),使用v-if(因?yàn)閼屑虞d,初始為false時(shí),不會(huì)渲染,但是因?yàn)樗峭ㄟ^(guò)添加和刪除dom元素來(lái)控制顯示和隱藏的,因此初始渲染開(kāi)銷較小,切換開(kāi)銷比較大)。

0 分享到:
和我們?cè)诰€交談!