为什么避免v-if和v-for一起使用和解决方案

• 原因：

  当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中，造成性能方面的浪费。所以永远不要把 v-if 和 v-for 同时用在同一个元素上。

• 解决方案：

  1. 如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环

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

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

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