vue.js 2 中哪個更好，使用 v-if 或 v-show？

Question

我正在使用 vue 2 進行項目。我需要知道在哪種情況下性能更好：使用 v-if 還是 v-show？。 我有一個很長的列表，每個項目的列表都有一個隱藏的表單，我需要顯示和隱藏以單擊包含每個項目列表的按鈕。 v-show 的切換 class 或使用 v-if 添加和刪除表單哪個更好？

Answer 1

tl;博士

假設問題嚴格與性能有關：

• v-show ：昂貴的初始加載，廉價的切換，
• v-if ：廉價的初始加載，昂貴的切換。

---

Evan You 在 VueJS 論壇上提供了更深入的回答

v-show 總是編譯和渲染所有內容 - 它只是向元素添加“display：none”樣式。 它具有較高的初始加載成本，但切換非常便宜。

相比之下，v-if 是真正有條件的：它是惰性的，所以如果它的初始條件為假，它甚至不會做任何事情。 這對初始加載時間很有好處。 當條件為真時，v-if 將編譯並呈現其內容。 切換 v-if 塊實際上會破壞其中的所有內容，例如，v-if 中的組件在切換時會被實際銷毀並重新創建，因此切換一個巨大的 v-if 塊可能比 v-show 更昂貴。

Answer 2

簡短回答：如果條件不會經常改變，請使用v-if 。 如果您想更頻繁地切換條件，請使用v-show 。

注意：如果條件為假， v-show不會從 DOM 中刪除元素。 因此，人們可以在使用例如螢火蟲檢查您的頁面時看到它。

Answer 3

添加 ' v-if ' 的使用可能會產生意想不到的后果，因為它連接和斷開元素與 DOM 的連接，而不是修改元素的顯示。

例如，如果您在表單上使用它並最終使用 v-if關閉該表單，您將收到此瀏覽器控制台警告：

    “Form submission canceled because the form is not connected”

如果你使用' v-show '，你就不會遇到這個問題。

Answer 4

v-show只是切換 CSS 的顯示屬性（“none”或“block”）。 當我們使用v-show ，HTML DOM 將僅在頁面上（帶有“display”屬性）。

但是好像我們使用v-if它從頁面中刪除整個 DOM 或根據條件重新創建整個 DOM。

檢查這個例子。

<p v-if="ok">If Check</p>
<p v-show="ok">Show Check</p> //try to set "ok" by true and false and inspect HTML

Answer 5

V-show

它將一次加載/渲染 DOM 中的所有元素，如果值為 false v-show="false"那么它將元素的顯示設置為“none”

V-if

在滿足條件之前它不會加載/渲染元素並在滿足條件時渲染元素

Answer 6

v-if：添加或刪除您的元素。 v-show：更改可見的 css 屬性。
如果經常切換，v-show 更好。 否則，我們使用 v-if（因為 css 花費了初始加載時間）。

Answer 7

我找到了一個可以仔細解釋您的問題的博客： https://learnvue.co/tutorials/v-if-vs-v-show 。

根據我的經驗：

• 使用v-show ：如果您需要經常切換某些東西。
• 使用v-if ：條件在運行時不會頻繁更改。

注意：如果您不想中斷，表單應該使用 v-show。