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
  })
 }
},
...           

总结：

1、vue2.x版本中v-for比v-if优先级更高

2、vue3.x版本中v-if比v-for优先级更高

3、同一个元素中避免同时使用v-if、v-for

4、使用计算属性筛选列表