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

• 在 vue 2.x 中，在一個元素上同時使用 v-if 和 v-for 時， v-for 會優先作用。
• 在 vue 3.x 中， v-if 總是優先於 v-for 生效。

對比學習

接下來我們通過一個簡單的示例來感知下，假設我們想要實現一個極簡的 todoList 效果：

我們有一個 todoList：

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

在 vue2 中， v-for 優先順序高於 v-if ，我們可以這樣實現：

<ul>
 <!-- vue2中，v-for優先順序高於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 優先順序要高於 v-for ，所以不能像 vue2 那樣將 v-for 和 v-if 放在同一個元素上，我們在 li 外面套一層用來執行 for 迴圈：

<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 在同一個元素上使用是無法直接在 vue3.x 中相容的。

最佳實踐

針對 v-if 和 v-for 的使用，其實官方是建議我們使用計算屬性來處理的，這樣既提高了效能，又可以相容到 vue3.x，接下來我們看看計算屬性實現方式：

模板部分：

<div id="app">
 <!-- 最佳實踐 -->
 <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',});

點選檢視： vue3示例 、vue2示例

總結

1. vue2.x 中 v-for 優先順序高於 v-if ，vue3.x 相反；
2. 儘量避免在同一個元素上面同時使用 v-if 和 v-for ，建議使用計算屬性替代。

到此這篇關於vue2和vue3的v-if與v-for優先順序對比學習的文章就介紹到這了,更多相關v-if與v-for優先順序內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！