为什么v-if和v-for不建议同时使用

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

原因：v-for比v-if优先级高，每一次都需要遍历整个数组，造成不必要的计算，影响性能，即使100个list中只需要使用一个数据，也会循环整个数组。(面试的时候可以答这个，下面是解决方法)

 <ul>
    <li v-for="item in list" v-if="item.actived">{{item.name}}</li>
 </ul>

解决：使用computed

<ul>
    <li v-for="item in activeList">{{item.name}}</li>
</ul>

computed: {
  activeList() {
    return this.list.filter(val => {
      return val.actived;
    });
  }
},