【Vue】v-if和v-for的优先级以及二者同时使用的情况

v-if

根据表达式的真假切换元素的显示状态，根据真假在dom树中相应的添加或移除。

相比于v-show（控制元素display:block / none)，在频繁切换时，v-show性能更优。

v-for

通过v-for指令，可以将一个数组遍历并渲染到页面中，每个渲染出来的元素都可以单独使用，从而方便地用于数据展示、分页等场景。

优先级

在 Vue2 中，v-for的优先级高于v-if。

在 Vue3 中，v-if的优先级高于v-for。

二者同时使用

Vue2

如果动态筛选数据并展示

// 需要筛选age大于18的元素展示
datalist: [
  { id: 1, name: "田本初", age: 22 },
  { id: 2, name: "李雷", age: 12 },
  { id: 3, name: "韩梅梅", age: 32 },
],
<div v-for="item in datalist" v-if="item.age > 18" :key="item.id">
  {{ item.name }}
</div>

结果如下，且控制台并未发现报错。

但是这么写并不规范，问题的实质是因为在Vue2中 v-for 优先级高于 v-if，所以不管是否符合 v-if 显示元素的条件，v-for 都会把所有内容全部遍历一遍后，v-if 再对已经遍历的元素进行删除，造成了加载的性能浪费。

可以配合过滤器先将数据进行处理，再配合 v-for 动态展示。

<div v-for="item in reslist" :key="item.id">
	{{ item.name }}
</div>
 
//利用vue的计算属性，过滤掉不需要的数据，剩下需要的数据再利用v-for循环遍历取出渲染
data() {
  return {
    datalist: [
      { id: 1, name: "田本初", age: 22 },
      { id: 2, name: "李雷", age: 12 },
      { id: 3, name: "韩梅梅", age: 32 },
    ]
},
computed: {
    reslist: function () {
        return this.datalist.filter(function (item) {
            return item.age > 18
        })
    }
}

如果一个变量需要控制整体元素是否显示

当控制 v-if 的元素不存在 v-for 中，可以使用template包裹住对应的v-for，也可以使用父级元素添加v-if，可以不加载从而优化性能。

• 添加一个template

  <div>
      <template v-if="isShow">
          <div v-for"item in list" :key="item.id">{{item.value}}</div>
      </template>
  </div>
  

• 给父级元素添加v-if

  <ul v-if="isShow">
     <li v-for="item in list" :key="item.id">{{item.value}}</li>
  </ul>
  

Vue3

在Vue3项目中将 v-if和v-for 同时写在一个标签中，发现并不像Vue2一样仍然可以正常显示，他抛出了一个错误，'v-for’指令中的’datalist’变量应该替换为返回过滤数组的计算属性。

解决方法

同Vue2，仅需在计算属性中处理得到筛选后的数据，v-for遍历这个处理好的数据即可。

总结

在 Vue2 中，v-for的优先级高于v-if，所以即使元素不符合v-if的条件，也会遍历，影响性能。可以使用计算属性来过滤出要渲染的数据，再将过滤后的数据v-for。

在 Vue3 中，v-if的优先级高于v-for，所以只要有不符合v-if条件的元素，遍历就会停止，从而造成错误。可以使用计算属性来过滤出要渲染的数据，再将过滤后的数据v-for。