v-if和v-for的优先级是什么？为什么不建议同时使用

v-if和v-for的优先级是什么

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

vue中v-if和v-for不建议同时使用

<ul>
  <li v-for="(item,index) in list" v-if="item.isActive" :key="item.id">
    {{ item.name }}
  </li>
</ul>

如上例子即使用100个item中只有一个需要展示 使用了v-if也是需要循环整个数组的、这在性能上是极大的浪费。

解决方案

1、如何实在循环外部可以在外层嵌套已成template（页面不生成dom节点）、在外层v-if判断、然后在进行使用v-for循环

<template v-if="isShow">
  <div v-for="(item,index) in list" v-if="item.isActive" :key="item.id">
    {{ item.name }}
  </div>
</template>

2、如果条件出现在循环内部、可以通过计算属性computed提前过滤掉那些不需要展示的数据

computed: {
    listData: function() {
        return this.list.filter(function (item) {
            return item.isShow
        })
    }
}