v-for与v-if优先级 谁先？ 谁后？需要共存时，如何提高性能

首先大家看下面的图片

在开发时，将v-for和v-if放在一个标签使用时，先不看程序有没有报错，首先编辑器就会报错：

The 'dataList' 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

原因是：因为v-for的优先级高于v-if，因此v-if就会循环运行在v-for中，就会造成不必要的计算，就会影响性能。

我们来用一个demo来印证一下这个观点：

这个例子就是将v-for与v-if在同一行代码标签中使用时，打印的render是先执行_l函数，那_l函数就是列表渲染的方法，然后在里列表函数方法里会循环着执行item.isShow这个条件，所以也就印证了，先执行的v-for后执行的v-if。

当然，源码里的答案也是一目了然的,执行大顺序是：静态根节点>once>for>if

那如何在v-for中使用if，又不会影响性能？

1. v-if使用在v-for的外层

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

2. 借助计算属性

computed: {
	dataList: function () {		return this.users.filter(function (user) {
			return user.isShow;//返回isShow=true的项，添加到dataList数组		})
	}
}