v-for 和 v-if 优先级

[TieMuZhen]

Vue 2.0版本

两者作用于同一个元素上时，v-for会拥有比v-if更高的优先级。
1、v-for优先于v-if被解析
2、如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可避免，浪费了性能
3、要避免出现这种情况，则在外层嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环

<template v-if="isShow">
    <p v-for="item in items">
</template>

4、如果条件出现在循环内部，可通过 computed属性 提前过滤掉那些不需要显示的项

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

Vue 3.0版本

两者作用于同一个元素上时，v-if会拥有比v-for更高的优先级。