Frontend Разработка | JavaScript & Верстка сайтов. HTML, CSS и React. Уроки для Фронтенд Developer. JS, Vue и Web технологии. IT Карьера, Курсы и Coding.
Наука · 30 июля 2026 г.
🔥 Vue: тонкий нюанс с v-if и v-for — 30 июля 2026 г. в 06:48:17.420
🔥 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