快捷導(dǎo)航

vue2和vue3的v-if與v-for優(yōu)先級(jí)對(duì)比學(xué)習(xí)

更新時(shí)間：2020年10月10日 11:35:00 作者：前端攻城師_老李

這篇文章主要介紹了vue2和vue3的v-if與v-for優(yōu)先級(jí)對(duì)比學(xué)習(xí)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

Vue.js 中使用最多的兩個(gè)指令就是 v-if 和 v-for ，因此我們可能會(huì)想要同時(shí)使用它們。雖然官方不建議這樣做，但有時(shí)確實(shí)是必須的，我們來(lái)了解下他們的工作方式：

在 vue 2.x 中，在一個(gè)元素上同時(shí)使用 v-if 和 v-for 時(shí)， v-for 會(huì)優(yōu)先作用。
在 vue 3.x 中， v-if 總是優(yōu)先于 v-for 生效。

對(duì)比學(xué)習(xí)

接下來(lái)我們通過(guò)一個(gè)簡(jiǎn)單的示例來(lái)感知下，假設(shè)我們想要實(shí)現(xiàn)一個(gè)極簡(jiǎn)的 todoList 效果：

我們有一個(gè) todoList：

const todoList = [
 {
 id: 0,
 task: '吃飯',
 done: true,
 },
 {
 id: 1,
 task: '睡覺(jué)',
 done: false,
 },
 {
 id: 2,
 task: '洗澡',
 done: true,
 },
 // ...,
];

在 vue2 中， v-for 優(yōu)先級(jí)高于 v-if ，我們可以這樣實(shí)現(xiàn)：

<ul>
 <!-- vue2中，v-for優(yōu)先級(jí)高于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)先級(jí)要高于 v-for ，所以不能像 vue2 那樣將 v-for 和 v-if 放在同一個(gè)元素上，我們?cè)?li 外面套一層用來(lái)執(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è)元素上使用是無(wú)法直接在 vue3.x 中兼容的。

最佳實(shí)踐

針對(duì) v-if 和 v-for 的使用，其實(shí)官方是建議我們使用計(jì)算屬性來(lái)處理的，這樣既提高了性能，又可以兼容到 vue3.x，接下來(lái)我們看看計(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);
 },
 },
});

點(diǎn)擊查看： vue3示例、vue2示例

總結(jié)

vue2.x 中 v-for 優(yōu)先級(jí)高于 v-if ，vue3.x 相反；
盡量避免在同一個(gè)元素上面同時(shí)使用 v-if 和 v-for ，建議使用計(jì)算屬性替代。

到此這篇關(guān)于vue2和vue3的v-if與v-for優(yōu)先級(jí)對(duì)比學(xué)習(xí)的文章就介紹到這了,更多相關(guān)v-if與v-for優(yōu)先級(jí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: