v-if和v-for的優(yōu)先級(jí)是什么
v-for比v-if優(yōu)先級(jí)高隅茎，所以使用的話，每次v-for都會(huì)執(zhí)行v-if,造成不必要的計(jì)算嫉沽，影響性能患膛，尤其是當(dāng)之需要渲染很小一部分的時(shí)候。
vue中v-if和v-for不建議同時(shí)使用
<ul>
<li v-for="(item,index) in list" v-if="item.isActive" :key="item.id">
{{ item.name }}
</li>
</ul>
如上例子即使用100個(gè)item中只有一個(gè)需要展示 使用了v-if也是需要循環(huán)整個(gè)數(shù)組的耻蛇、這在性能上是極大的浪費(fèi)。
解決方案
1胞此、如何實(shí)在循環(huán)外部可以在外層嵌套已成template（頁面不生成dom節(jié)點(diǎn)）臣咖、在外層v-if判斷、然后在進(jìn)行使用v-for循環(huán)
<template v-if="isShow">
<div v-for="(item,index) in list" v-if="item.isActive" :key="item.id">
{{ item.name }}
</div>
</template>
2漱牵、如果條件出現(xiàn)在循環(huán)內(nèi)部夺蛇、可以通過計(jì)算屬性computed提前過濾掉那些不需要展示的數(shù)據(jù)
computed: {
listData: function() {
return this.list.filter(function (item) {
return item.isShow
})
}
}
