为什么避免 v-if 和 v-for 用在一起

在官方文档中明确指出v-for和v-if不建议一起使用。

原因：

      v-for 比 v-if 具有更高的优先级，每一次都需要遍历整个数组，造成不必要的计算，影响性能，即使100个list中只需要使用一个数据，也会循环整个数组。

解决方案：

1. 在其父元素上进行v-if判断，在内部执行v-for循环
2. 如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项

computed: {
  list () {
   return this.list.filter(item=> {
    return item.isShow
   })
  }
}