Vue2 如何优雅的解决v-for和v-if同时出现

写在前面

对于 vue 2.0+ 我们都知道v-for 的优先级 高于 v-if ，因此在项目中如果针对同一个元素同时使用 v-for 和 v-if 那么编辑器便会发出警告，虽然程序仍能正常运行、界面显示也没有问题，但是从开发规范和性能上来讲，这种操作通常是不建议和不被允许的。

那么如何合理的规避这个问题呢？

• 答案就是使用 computed
• 或在父元素上使用v-if,提升v-if的优先级。（具体情况需视数据结构而定）

如何操作且听我慢慢道来：

注： Vue 3.0 已经调整了v-if和v-for 的优先级，故不存在渲染性能问题。

为什么不建议 v-for 和 v-if 同时使用？

前文提到在 vue 2.0+ 中 v-for 的优先级 高于 v-if ，这段话如何理解呢？假设我有以下数组需要通过v-for渲染到页面。其中是show用于控制元素是否显示。

[
  {  i: 0 , show:true },
  {  i: 1 , show:false },
  {  i: 2 , show:false },
  {  i: 3 , show:true },
  {  i: 4 , show:true }
]
1
2
3
4
5
6
7

代码执行过程如下草图所示，可见在执行过程中，元素经历了先创建后剔除的过程，当数据量达到一定数量级时，会对性能造成显著影响。

使用computed 解决

对于上述数据结构，可通过computed提前剔除不需要显示的元素，从而代替v-if指令，实现显隐控制。代码片段如下：

// script
  data() {
    return {
		list:[
		  {  i: 0 , show:true },
		  {  i: 1 , show:false },
		  {  i: 2 , show:false },
		  {  i: 3 , show:true },
		  {  i: 4 , show:true }
		]
    };
  },

 computed:{
	list_show(){
		return this.list.filter(item=>item.show)
	},
 }

// template
<p  v-for="item in list_show" :key="item.i">{{item.i}} </p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

提高v-if的优先级

对于某些特定的数据结构，可以使v-if作用于v-for的父元素，从而达到提升v-if优先级的目的。数据格式及实现方案见下方伪代码

通常使用 作父元素包裹 v-for元素

// script
  data() {
    return {
		list:{
           show:false,
           data:[0,1,2,3,4]
		}
    };
  },

// template
<template v-if="list.show">
	<p  v-for="item in list.data" :key="item">{{item}} </p>
</template> 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

结语

本文通过伪代码的形式，介绍了Vue 2项目中解决v-for和v-if冲突的两种方案，具体使用何种方法需要视业务需求和数据结构而定。

---

🔴 点击下方卡片，关注我的个人公众号，获取更多优质有趣的内容。、

---