🔥 Vue: тонкий нюанс с v-if и v-for

Если используешь v-if и v-for на одном и том же элементе — осторожно! Порядок важен 👇

<!-- ⚠️ Антипаттерн -->
<li v-for="item in items" v-if="item.visible">
  {{ item.name }}
</li>

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

computed: {
  visibleItems() {
    return this.items.filter(item => item.visible);
  }
}

Frontend разработчик

🔥 Vue: тонкий нюанс с v-if и v-for

Если используешь v-if и v-for на одном и том же элементе — осторожно! Порядок важен 👇

<!-- ⚠️ Антипаттерн -->
<li v-for="item in items" v-if="item.visible">
  {{ item.name }}
</li>

Такой код неэффективен: v-if не влияет на v-for — Vue сначала рендерит все элементы, а потом фильтрует по v-if.

✅ Лучше так:

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

А в computed:

computed: {
  visibleItems() {
    return this.items.filter(item => item.visible);
  }
}

💡 Это улучшит производительность и избавит от неожиданных багов при больших списках.

Подробнее — в оф. доках:
https://vuejs.org/guide/essentials/list.html#v-for-with-v-if

👉 @frontend_1

hottg.com/frontend_1/3962

1.8K viewsApr 23 at 11:30