v-for 和 v-if 同时使用的问题

假设有如下数组，需要将数组中的num渲染至页面中，同时遵循条件：对应的show值为true才渲染，为false就不渲染。

numArr: [
	{ id: 'NUM1', num: 1, show: true },
	{ id: 'NUM2', num: 2, show: false },
	{ id: 'NUM3', num: 3, show: true },
	{ id: 'NUM4', num: 4, show: true },
	{ id: 'NUM5', num: 5, show: false },
	{ id: 'NUM6', num: 6, show: true },
	{ id: 'NUM7', num: 7, show: false },
	{ id: 'NUM8', num: 8, show: true }
]

常规写法就是在v-for里直接加v-if做判断，show值为true才渲染

<ul>
	<li v-for="item in numArr" :key="item.id" v-if="item.show">{{ item.num }}</li>
</ul>

此时，能达到预期效果，能正常渲染，但同时会报一个错：

[vue/no-use-v-if-with-v-for]
The ‘numArr’ variable inside ‘v-for’ directive should be replaced with a computed property that returns filtered array instead. You should not mix ‘v-for’ with ‘v-if’.

不一定每个版本的vue都会报这个错，如果装了代码检查插件eslint的话，编辑器也会提醒：

这段话翻译过来，核心意思就是：不要在v-for里面使用v-if，应该用computed来返回符合条件的数据再渲染。

经查阅可知：v-for 比 v-if 优先级高。

好吧，这句话看不懂，说人话就是我 v-for 比你 v-if 霸道，一起使用的时候，我 v-for 不管你 v-if 里面的值是 true 还是 false，我一律先 v-for 了再说，然后我再根据你 v-if 里的值来最终确定是否渲染到dom里面去。

vue是追求极致性能的，必然是忍受不了，所以会报错。

那么，该如何真正做到先判断 show 值再渲染，做到最优性能呢？报错信息里已经给了答案，就是用 computed 先把原数组处理了，过滤掉 show 值为 fasle 的元素，只留下 show 值为 true 的元素，再来渲染，此时就真的只渲染该渲染的了，这样就很好的取代了 v-if ，实现就是如下：

// html
<ul>
	<li v-for="item in showNum" :key="item.id">{{ item.num }}</li>
</ul>

// js
computed: {
	showNum() {
		let showArr = this.numArr.filter(arr => {
			return arr.show
		})
		return showArr
	}
}

---

一句话日记：写是外功，理解是内功