【vue面試題】v-if 和 v-show 的區(qū)別？

我們用一個小功能來說明v-if和v-show的區(qū)別，當點擊一個button實現(xiàn)p元素的顯示和隱藏。

說明：左邊是模板，中間黃色模塊是虛擬節(jié)點樹（vnode），右邊是最終生成的元素

v-if 和 v-show 的區(qū)別？

v-if能夠控制是否生成vnode，也就間接控制了是否生成對應的dom。當v-if為true時，會生成對應的vnode，并生成對應的dom元素；當其為false時，不會生成對應的vnode，所以不會生成任何的dom元素。

v-show始終會生成vnode，也就間接導致了始終生成dom。它只是控制dom的display屬性，當v-show為true時，不做任何處理；當其為false時，生成的dom的display屬性為none。

使用v-if可以有效的減少樹的節(jié)點和渲染量，但也會導致樹的不穩(wěn)定；而使用v-show可以保持樹的穩(wěn)定，但不能減少樹的節(jié)點和渲染量。因此，在實際開發(fā)中，顯示狀態(tài)變化頻繁的情況下應該使用v-show，以保持樹的穩(wěn)定；顯示狀態(tài)變化較少時應該使用v-if，以減少樹的節(jié)點和渲染量。