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

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

原因：vue2中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;
    });
  }
},

vue3中v-if比v-for优先级高 因此v-if执行时要调用的变量可能还不存在，会导致报错，可以将v-for用template标签包裹