vue2和vue3的v-if與v-for優(yōu)先級對比學(xué)習(xí)
Vue.js 中使用最多的兩個(gè)指令就是 v-if
和 v-for
,因此我們可能會(huì)想要同時(shí)使用它們。雖然官方不建議這樣做,但有時(shí)確實(shí)是必須的,我們來了解下他們的工作方式:
- 在 vue 2.x 中,在一個(gè)元素上同時(shí)使用
v-if
和v-for
時(shí),v-for
會(huì)優(yōu)先作用。 - 在 vue 3.x 中,
v-if
總是優(yōu)先于v-for
生效。
對比學(xué)習(xí)
接下來我們通過一個(gè)簡單的示例來感知下,假設(shè)我們想要實(shí)現(xiàn)一個(gè)極簡的 todoList 效果:
我們有一個(gè) todoList:
const todoList = [ { id: 0, task: '吃飯', done: true, }, { id: 1, task: '睡覺', done: false, }, { id: 2, task: '洗澡', done: true, }, // ..., ];
在 vue2 中, v-for
優(yōu)先級高于 v-if
,我們可以這樣實(shí)現(xiàn):
<ul> <!-- vue2中,v-for優(yōu)先級高于v-if --> <li v-for="item in todoList" v-if="!item.done" :class="{todo: !item.done}" :key="item.id"> <span>{{item.task}}</span> </li> </ul> <ul> <li v-for="item in todoList" v-if="item.done" :class="{finished: item.done}" :key="item.id"> <span>{{item.task}}</span> </li> </ul>
在 vue3 中,由于 v-if
優(yōu)先級要高于 v-for
,所以不能像 vue2 那樣將 v-for
和 v-if
放在同一個(gè)元素上,我們在 li
外面套一層用來執(zhí)行 for 循環(huán):
<ul> <template v-for="item in list" :key="item.id"> <li v-if="!item.done" :class="{todo: !item.done}"> <span>{{item.task}}</span> </li> </template> </ul> <ul> <template v-for="item in list" :key="item.id"> <li v-if="item.done" :class="{finished: item.done}"> <span>{{item.task}}</span> </li> </template> </ul>
可以看出,如果在 vue2.x 中 v-if
和 v-for
在同一個(gè)元素上使用是無法直接在 vue3.x 中兼容的。
最佳實(shí)踐
針對 v-if
和 v-for
的使用,其實(shí)官方是建議我們使用計(jì)算屬性來處理的,這樣既提高了性能,又可以兼容到 vue3.x,接下來我們看看計(jì)算屬性實(shí)現(xiàn)方式:
模板部分:
<div id="app"> <!-- 最佳實(shí)踐 --> <ul class="todo-list"> <li v-for="item in todos" class="todo" :key="item.id"> <span>{{item.task}}</span> </li> </ul> <ul v-if="showFinished"> <li v-for="item in finished" :key="item.id" class="finished"> <span>{{item.task}}</span> </li> </ul> <p> show finished? <input type="checkbox" v-model="showFinished" /> {{showFinished ? 'yes' : 'no'}} </p> </div>
js 部分:
// vue3.x Vue.createApp({ data() { return { msg: 'Todo List', showFinished: true, list: todoList, }; }, computed: { finished() { return todoList.filter(t => t.done); }, todos() { return todoList.filter(t => !t.done); }, }, }).mount('#app'); // vue2.x new Vue({ el: '#app', data() { return { msg: 'Todo List', showFinished: true, list: todoList, }; }, computed: { finished() { return todoList.filter(t => t.done); }, todos() { return todoList.filter(t => !t.done); }, }, });
總結(jié)
- vue2.x 中
v-for
優(yōu)先級高于v-if
,vue3.x 相反; - 盡量避免在同一個(gè)元素上面同時(shí)使用
v-if
和v-for
,建議使用計(jì)算屬性替代。
到此這篇關(guān)于vue2和vue3的v-if與v-for優(yōu)先級對比學(xué)習(xí)的文章就介紹到這了,更多相關(guān)v-if與v-for優(yōu)先級內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
如何使用vue實(shí)現(xiàn)前端導(dǎo)入excel數(shù)據(jù)
在實(shí)際開發(fā)中導(dǎo)入功能是非常常見的,導(dǎo)入功能前端并不難,下面這篇文章主要給大家介紹了關(guān)于如何使用vue實(shí)現(xiàn)前端導(dǎo)入excel數(shù)據(jù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04ejsExcel模板在Vue.js項(xiàng)目中的實(shí)際運(yùn)用
這篇文章主要介紹了ejsExcel模板在Vue.js項(xiàng)目中的實(shí)際運(yùn)用,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-01-01在Vue中使用Viser說明(基于AntV-G2可視化引擎)
這篇文章主要介紹了在Vue中使用Viser說明(基于AntV-G2可視化引擎),具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10