开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

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

编写的时候如果直接写在一起这样就会出现警告，如下写法

 <div v-for="(item,index) in checkList"  :key="index"  v-if="item.status">{{item.name}}</div>

所以我们为了避免这样的问题，就可以在外层添加一个template标签进行循环，在里面标签内进行if判断的渲染，因为template标签是不会被其渲染成一个dom节点的

<template v-for="(item,index) in checkList">
    <div :key="index"  v-if="item.status" >{{item.name}}</div>   
</template>

注意：永远不要把 v-if 和 v-for 同时用在同一个元素上，带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环

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

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

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

总结

1.v-for 优先于 v-if被解析，故为v-for的优先级更大。
2.如果同时出现，每次渲染都会先执行循环再判断条件，无论如何循环都不可以避免，浪费了性能
3.避免这个情况，外层嵌套template，在这一层进行v-if判断，在内部进行v-for循环
4.使用计算属性computed，先对数据进行处理，将处理后的数据再进行循环渲染
分享结束，拜拜~~

v-for和v-if 优先级的问题

总结