Практичні матеріали про Vue.js на прикладах із реальних проєктів: стан компонентів, життєвий цикл, drag-and-drop, Rich Text редактори, повторне використання компонентів, взаємодію з DOM та складні UI-баги. Основний акцент - не на синтетичних прикладах, а на причинах проблем і перевірках, які допомагають не допустити їх повторення.
У SPA лічильник unread notifications може бути правильним під час активної роботи й застаріти після sleep, background tab або повернення через browser cache. WebSocket добре доставляє зміни в реальному часі, але після повернення у вкладку state треба звірити з сервером.
Інтерфейс може виглядати правильно, але Vue все одно попереджає про значення default slot. Причина проста: для компонента третій аргумент h() не варто передавати звичайним рядком. Показую різницю між h('a', ...) і h(Link, ...).
Коли користувач змінює фільтр, поточна сторінка старої вибірки більше не має сенсу. Але просте скидання pageIndex усередині спостерігача може запустити два однакові запити. Розбираю, як розділити ці реакції без дублювання завантаження.
У MessageAttachments.vue я зіткнулася з вкладеним <a>: вся картка відкривала вкладення, а окреме посилання всередині мало завантажувати файл. Пояснюю, чому @click.stop не виправляє невалідний HTML, як браузер може перебудувати DOM і чому дві дії краще робити сусідніми елементами.
Після перетягування Content Blocks у Vue-редакторі службові підписи блока інколи опинялися всередині Rich Text: locale, позиція, ID якоря, назва редактора й інший текст інтерфейсу. Розбираю, чому drag-and-drop поруч із contenteditable потребує стабільних Vue keys, чітких DOM-меж, правильного життєвого циклу редактора та окремого контракту синхронізації контенту.