v-if和v-for的优先级

v-if和v-for的优先级

1.v-for的优先级高于v-if
原因：v-for比v-if优先级高，所以使用的话，每次v-for都会执行v-if，造成不必要的计算，影响性能，尤其是当前需要渲染很小一部分的时候。

<ul>
    <li v-for="user in users" v-if="user.isActive" :key="user.id">
      {{ user.name }}
    </li>
  </ul>

如上情况，即使有很多user 但是只要有一个需要使用v-if，也需要循环整个数组，这在性能上是极大的浪费。

但是我们可以使用computed计算属性解决：

<div>
	<div v-for="(user,index) in activeUsers" :key="user.index" >
		{{ user.name }} 
	</div>
</div>
data () {  // 业务逻辑里面定义的数据
    return {
      users,: [{
        name: '111111',
        isShow: true
      }, {
        name: '22222',
        isShow: false
      }]
    }
  }
computed: {
	activeUsers: function () {
		return this.users.filter(function (user) {
			return user.isShow;//返回isShow=true的项，添加到activeUsers数组
		})
	}
}

总结：
v-for比v-if优先级高，一起使用会浪费性能，不建议同时使用，如果必要的情况下，可以选择使用computed过滤掉不需要显示的项目。