溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了Vue中為什么要避免同時使用v-for和 v-if，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
為什么要避免同時使用 v-for 和 v-if
在 Vue2 中 v-for 優先級更高，所以編譯過程中會把列表元素全部遍歷生成虛擬 DOM，再來通過 v-if 判斷符合條件的才渲染，就會造成性能的浪費，因為我們希望的是不符合條件的虛擬 DOM都不要生成
在 Vue3 中 v-if 的優先級更高，就意味著當判斷條件是 v-for 遍歷的列表中的屬性的話，v-if 是拿不到的
所以在一些需要同時用到的場景，就可以通過計算屬性來過濾一下列表，如下
<template>
<ul>
<li v-for="item in activeList" :key="item.id">
{{ item.title }}
</li>
</ul>
</template>
<script>
// Vue2.x
export default {
computed: {
activeList() {
return this.list.filter( item => {
return item.isActive
})
}
}
}
// Vue3
import { computed } from "vue";
const activeList = computed(() => {
return list.filter( item => {
return item.isActive
})
})
</script>感謝你能夠認真閱讀完這篇文章，希望小編分享的“Vue中為什么要避免同時使用v-for和 v-if”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
