vue中的v-show 和 v-if怎么樣區分

這篇文章將為大家詳細講解有關vue中的v-show 和 v-if怎么樣區分，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。

1. v-show

不管初始的條件是什么，元素總是會被渲染，并且只是簡單的基于 CSS display: none 或者 display: block 的屬性進行切換。

2. v-if

會根據初始的條件（data里自己的定義的數據）來進行真正的渲染（組件真正的銷毀和重建），如果條件為真，才會開始渲染條件塊，如果條件為假，則不會渲染條件塊。

注意： v-if不要和v-for一起使用！

當和 v-for 一起使用時，v-for 的優先級比 v-if 更高，詳見 vue官網關于 v-for 的詳細描述 ，為什么不能一起使用，以下我用代碼來解釋一下。

<ul>
 <li
 v-for = "(item, index) in list"
 v-if = "isActive"
 :key = "item.id"
 >
 {{ item.name }}
 </li>
</ul>

以上代碼將會經過如下運算

this.list.map( user=> {
 if (isActive) {
 return user.name
 }
})

因此，哪怕我們只渲染一小部分元素，也得在每次重新渲染的時候遍歷整個列表，不論 isActive 是否發生了變化。如果 list 的數據有很多，就會造成性能低，頁面可能卡頓的現象出現。

總結

共同點：

v-if和v-show都是通過判斷綁定數據的true\false來展示的

不同點：

v-if只有在判斷為true的時候才會對數據進行渲染，false的時候把包含的代碼進行刪除。除非再次進行數據渲染，v-if才會重新判斷?？梢哉f是用法比較傾向于對數據一次操作。
v-show是無論判斷是什么都會先對數據進行渲染，只是false的時候對節點進行display:none;的操作。所以再不重新渲染數據的情況下，改變數據的值可以使數據展示或隱藏。

用法推薦：

v-if更適合于帶有權限的操作，渲染時判斷權限數據，有則展示該功能，沒有則刪除。
v-show更適合于日常使用，可以減少數據的渲染，減少不必要的操作。
綜上，v-if 有更高的切換消耗，而 v-show 有更高的初始渲染消耗。
因此，如果需要頻繁切換 v-show 較好，如果在運行時條件不大可能改變，更傾向功能權限性的話 v-if 較好。

關于vue中的v-show 和 v-if怎么樣區分就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。