在官方文檔中明確指出v-for和v-if不建議一起使用。

原因：vue2中v-for比v-if優(yōu)先級(jí)高 ，每一次都需要遍歷整個(gè)數(shù)組，造成不必要的計(jì)算，影響性能，即使100個(gè)list中只需要使用一個(gè)數(shù)據(jù)，也會(huì)循環(huán)整個(gè)數(shù)組。

 <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優(yōu)先級(jí)高 因此v-if執(zhí)行時(shí)要調(diào)用的變量可能還不存在，會(huì)導(dǎo)致報(bào)錯(cuò)，可以將v-for用template標(biāo)簽包裹