Vue3中v-if和v-for優(yōu)先級實例詳解
在vue2中應(yīng)盡量避免二者同時使用
當(dāng)
v-if與v-for一起使用時，v-for具有比v-if更高的優(yōu)先級。
那么,我們舉個例子說明為啥不推薦
<template>
<div class="hello">
<div v-for="(item,index) in list" v-if="index === 9" :key="item" ></div>
</div>
</template>
?
<script>
export default {
data(){
return {
list:[1,2,3,4,5,6,7,8,9,10] //需要遍歷的數(shù)據(jù)
}
}
};
</script>
?
<style scoped>
</style>它實際經(jīng)過的運算是這樣的
this.list.map(function (item,index) {
if (index===9) {
return item
}
})因此哪怕我們只渲染出一小部分的元素，也得在每次重渲染的時候遍歷整個列表，不論是否發(fā)生了變化。
不建議這樣做的原因就是比較浪費性能
Vue2 推薦的改進方案也是比較簡單,就是采用計算屬性去生成你要遍歷的數(shù)組
如下
<template>
<div class="hello">
<!-- 2. 然后這里去循環(huán)已經(jīng)被過濾的屬性 -->
<div v-for="(item) in ListArr" :key="item" ></div>
</div>
</template>
?
<script>
export default {
data(){
return {
list:[1,2,3,4,5,6,7,8,9,10]
}
},
computed:{
//1. 在computed里先做好判斷，這里過濾的成本遠(yuǎn)比v-if的成本低
ListArr(){
return this.list.filter((_,index) => index === 1)
}
}
};
</script>
<style scoped>
</style>從計算成本上來說，在計算屬性中過濾會比在dom中判斷是否顯示更低。
vue3中的改變
當(dāng)
v-if與v-for一起使用時，v-if具有比v-for更高的優(yōu)先級。
那么是不是就可以鼓勵大家這樣使用呢?很顯然不是,官方文檔仍然不推薦同時使用,我們看下為什么
同樣的,我們?nèi)匀皇褂蒙厦胬幼龇治?/p>
<template>
<div class="hello">
<div v-for="(item,index) in list" v-if="index === 9" :key="item" ></div>
</div>
</template>
?
<script>
export default {
data(){
return {
list:[1,2,3,4,5,6,7,8,9,10] //需要遍歷的數(shù)據(jù)
}
}
};
</script>
<style scoped>
</style>由于 v-if 優(yōu)先級高,導(dǎo)致頁面什么也不會渲染,控制臺還有報錯
[Vue warn]: Property "index" was accessed during render but is not defined on instance.
當(dāng)然還有一些其它用法例如這種,可以顯示數(shù)據(jù),只是會一些Vue warn的警告
<template>
<div class="hello">
<ul>
<li v-for="(item, index) in list" :key="index" v-if="item.show">
{{ item.name }}
</li>
</ul>
</div>
</template>
?
<script>
export default {
data(){
return {
list:[
{ name: '張三', show: false },
{ name: '李四', show: true },
] //需要遍歷的數(shù)據(jù)
}
}
};
</script>
<style scoped>
</style>這種方法也不是最好的,官方推薦的寫法是這樣的, 把 v-for 移動到容器元素上,例如ul,ol 或者外面包裹一層 template
<template>
<div class="hello">
<ul>
<template v-for="(item, index) in list" :key="index">
<li v-if="item.show">
{{ item.name }}
</li>
</template>
</ul>
</div>
</template>
?
<script>
export default {
data(){
return {
list:[
{ name: '張三', show: false },
{ name: '李四', show: true },
] //需要遍歷的數(shù)據(jù)
}
}
};
</script>
<style scoped>
</style>但如果想要有條件地跳過循環(huán)的執(zhí)行，那么可以將v-if置于外層元素或者template上。
例如這樣
<template>
<div class="hello">
<ul v-if="list.length">
<li v-for="(item, index) in list" :key="index">
{{ item.name }}
</li>
</ul>
</div>
</template>
?
<script>
export default {
data(){
return {
list:[
{ name: '張三', show: false },
{ name: '李四', show: true },
] //需要遍歷的數(shù)據(jù)
}
}
};
</script>
<style scoped>
</style>結(jié)論
- 在vue2中，v-for的優(yōu)先級高于v-if
- 在vue3中，v-if的優(yōu)先級高于v-for
- 兩種混在一起寫法均不被官方推薦
補充：注意事項
1.永遠(yuǎn)不要把 v-if 和 v-for 同時用在同一個元素上，帶來性能方面的浪費（每次渲染都會先循環(huán)再進行條件判斷）
2.如果避免出現(xiàn)這種情況，則在外層嵌套template（頁面渲染不生成dom節(jié)點），在這一層進行v-if判斷，然后在內(nèi)部進行v-for循環(huán)
<template v-if="isShow">
<p v-for="item in items">
</template>
3.如果條件出現(xiàn)在循環(huán)內(nèi)部，可通過計算屬性computed提前過濾掉那些不需要顯示的項
computed: {
items: function() {
return this.list.filter(function (item) {
return item.isShow
})
}
}
總結(jié)
到此這篇關(guān)于Vue3中v-if和v-for優(yōu)先級詳解的文章就介紹到這了,更多相關(guān)Vue3 v-if和v-for優(yōu)先級內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中為什么在組件內(nèi)部data是一個函數(shù)而不是一個對象
這篇文章主要介紹了vue中為什么在組件內(nèi)部data是一個函數(shù)而不是一個對象,本文通過示例代碼給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
Vue3 composition API實現(xiàn)邏輯復(fù)用的方法
本文主要介紹了Vue3 composition API實現(xiàn)邏輯復(fù)用的方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了Element input樹型下拉框的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家介紹了Vue獲取表單數(shù)據(jù)的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
uniapp+vue3路由跳轉(zhuǎn)傳參的實現(xiàn)
本文主要介紹了uniapp+vue3路由跳轉(zhuǎn)傳參的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
Vue項目打包并部署nginx服務(wù)器的詳細(xì)步驟
vue項目開發(fā)好之后需要部署到服務(wù)器上進行外網(wǎng)訪問,下面這篇文章主要給大家介紹了關(guān)于Vue項目打包并部署nginx服務(wù)器的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
又是一個老生常談的功能，接下來會從零實現(xiàn)一個萬年日歷，從布局到邏輯，再到隨處可見的打卡功能。文中的示例代碼簡潔易懂，需要的可以參考一下2023-01-01
Vue JS對URL網(wǎng)址進行編碼解碼,轉(zhuǎn)換為對象方式
這篇文章主要介紹了Vue JS對URL網(wǎng)址進行編碼解碼,轉(zhuǎn)換為對象方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue中使用swiper 插件出錯問題及解決辦法，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2021-08-08
vue2移動端使用vue-qrcode-reader實現(xiàn)掃一掃功能的步驟
最近在使用vue開發(fā)的h5移動端想要實現(xiàn)一個調(diào)用攝像頭掃描二維碼的功能,所以下面這篇文章主要給大家介紹了關(guān)于vue2移動端使用vue-qrcode-reader實現(xiàn)掃一掃功能的相關(guān)資料,需要的朋友可以參考下2023-06-06