Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Значення властивості в data». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Коли ти змінюєш властивість із `data()`, Vue **автоматично відстежує цю зміну** і **оновлює інтерфейс (DOM)**, який залежить від цієї властивості. **Ключове:** Vue не перемальовує весь DOM, а тільки ті вузли, які справді залежать від зміненого значення.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення## Коротко Коли ти змінюєш властивість із `data()`, Vue **автоматично відстежує цю зміну** і **оновлює інтерфейс (DOM)**, який залежить від цієї властивості. Тобто Vue: 1. фіксує зміну через реактивну систему, 2. повідомляє всі залежності, 3. і запускає оновлення потрібних частин інтерфейсу. --- ## Детально: покроковий процес Припустимо, у тебе є компонент: ```javascript export default { data() { return { count: 0 } }, template: `<button @click="count++">{{ count }}</button>` } ``` Тепер розберемо, що відбувається при `count++`. --- ### 1. Vue робить `data()` реактивним При створенні компонента: - Vue викликає `data()` і отримує об'єкт `{ count: 0 }`. - Цей об'єкт обгортається в **реактивну оболонку** (у Vue 3 - через `Proxy`). - Тепер кожне читання або запис властивості (`count`) буде перехоплюватися. --- ### 2. При рендері шаблону реєструється залежність Коли компонент рендериться вперше, Vue **читає** `state.count`, щоб підставити його значення в шаблон (`{{ count }}`). Тоді спрацьовує пастка `get` у Proxy: ```javascript get(target, key, receiver) { track(target, key) // "запам'ятай", що шаблон залежить від count return Reflect.get(target, key, receiver) } ``` Тепер Vue знає: «Якщо властивість `count` зміниться - треба перерендерити шаблон». --- ### 3. Коли ти змінюєш значення (`count++`) Vue перехоплює операцію запису: ```javascript set(target, key, value, receiver) { const oldValue = target[key] const result = Reflect.set(target, key, value, receiver) if (oldValue !== value) { trigger(target, key) // повідомити залежні ефекти } return result } ``` --- ### 4. Vue викликає оновлення компонента Функція `trigger()` знаходить усі ефекти, що залежать від `count` (у нашому випадку - **функцію рендера компонента**) і **запускає її заново**. Vue не перемальовує весь DOM, а **тільки ті вузли**, де є `{{ count }}`. --- ### 5. Віртуальний DOM оновлює реальний DOM Рендер-функція створює новий віртуальний DOM. Vue порівнює старе і нове дерево (diffing) і оновлює **тільки текст, що змінився** у `<button>`. Саме тому Vue оновлюється блискавично, навіть за сотень реактивних властивостей. --- ## Весь ланцюжок в одному рядку: `this.count++` → `Proxy.set()` → `trigger()` → повторний рендер компонента → diff → patch → оновлений DOMДля рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.