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

全國咨詢/投訴熱線:400-618-4000

v-show和v-if指令的共同點和不同點?【面試常問】

更新時間:2021年09月30日18時30分 來源:傳智教育 瀏覽次數:

v-show和v-if指令的共同點和不同點?

1、相同點:

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

2、不同點:

(1)實現本質方法不同

v-show本質就是通過設置css中的display設置為none,控制隱藏

v-if是動態的向DOM樹內添加或者刪除DOM元素

(2)編譯的區別

v-show其實就是在控制css

v-if切換有一個局部編譯/卸載的過程,切換過程中合適地銷毀和重建內部的事件監聽和子組件

(3)編譯的條件

v-show都會編譯,初始值為false,只是將display設為none,但它也編譯了

v-if初始值為false,就不會編譯了

(4)性能比較

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

3、注意點:

因為v-show實際是操作display:" "或者none,當css本身有display:none時,v-show無法讓顯示

4、總結(適用場景):

如果要頻繁切換某節點時,使用v-show(無論true或者false初始都會進行渲染,此后通過css來控制顯示隱藏,因此切換開銷比較小,初始開銷較大),如果不需要頻繁切換某節點時,使用v-if(因為懶加載,初始為false時,不會渲染,但是因為它是通過添加和刪除dom元素來控制顯示和隱藏的,因此初始渲染開銷較小,切換開銷比較大)。

红豆直播app黄台_红豆直播app下载免费_红豆直播app下载