tgoop.com/frontend_1/3962
Create:
Last Update:
Last Update:
🔥 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
BY Frontend разработчик

Share with your friend now:
tgoop.com/frontend_1/3962