vue3.x 中 v-if 與 v-for 的優先級

vue2.x版本中在一個元素上同時使用 v-if 和 v-for 時，v-for 優先級更高

//html
<p v-for="item in arr2" v-if="item.val>1">
 {{item.val}}
</p>
//js
data:{
 arr2:[{val:1},{val:2},{val:3}]
 },           

vue3.x 版本中 v-if 總是優先于 v-for

• 這意味着 v-if 的條件将無法通路到 v-for 作用域内定義的變量别名：

同時使用 v-if 和 v-for 是不推薦的

• 可以在 <template> 标簽上使用 v-for 來渲染一個包含多個元素的塊

...
<template v-for="item in arr2">
  <p v-if="item.val>1">{{item.val}}</p>
 </template>
...
data:function(){
 return {
  arr2:[{val:1},{val:2},{val:3}]
  }
}
...           

最好辦法是通過建立計算屬性篩選出清單，減少在模闆層面管理相關邏輯

<p v-for="item in newArr">{{item.val}}</p>           

...
data:function(){
 return {
  arr:[{val:1},{val:2},{val:3}]
 }
},
computed:{
 newArr(){
  return this.arr.filter(item=>{
   return item.val>1
  })
 }
},
...           

總結：

• vue2.x版本中v-for比v-if優先級更高
• vue3.x版本中v-if比v-for優先級更高
• 同一個元素中避免同時使用v-if、v-for
• 使用計算屬性篩選清單