Коли варто використовувати Vue?

Ви хочете офіційних відповідей щодо маршрутизації, стану й збірки, а не вправи з порівняння. У команді є люди, які пишуть більше розмітки, ніж JavaScript, — шаблони пасують цій формі. Вам потрібні оновлення, що досягають лише зміненого, без ручного налаштування перерендерів. Скоуповані стилі за замовчуванням замінять методологію CSS, яку інакше довелося б упроваджувати.

Коли не варто використовувати Vue?

Локальний ринок праці переважно React, і команда змінюватиметься. Проєкт залежить від бібліотек, які сьогодні існують лише для React. Сторінка майже без стану — реактивний механізм стане накладною витратою без застосування. Ніхто не вивчить, де значення перестає відстежуватися, — і тихі відмови стануть дорогими.

РозробкаБудь-який рівеньОновлено вер. 2026 р.

Vue

Vue — фреймворк JavaScript для побудови інтерфейсів, чия система реактивності оновлює рівно ті частини екрана, що читають значення, коли воно змінюється. Ви ніколи не оголошуєте залежностей; натомість майже кожен баг у Vue, що не є друкарською помилкою, — це значення, яке тихо вийшло з реактивної системи: його скопіювали, розклали чи замінили. Сторінка починається з усього Composition API на одному екрані; далі — відстеження й вісім способів, якими значення перестає оновлюватися, computed проти watch, шаблони й компілятор, composables, перехід із Vue 2 на Vue 3 і п’ять задокументованих кейсів.

Поточна версія: 3.5 стабільна · 3.6 у RC
Реактивність: Проксі, відстеження читанням
Автор: Еван Ю · 2014

Vue на одному екрані: API, яким користується компонент

Компонент Vue — це зазвичай один файл .vue: шаблон, що описує екран, і блок <script setup>, де живе все інше, — стан, похідні від нього значення, реакції на зміни й домовленість із батьківським компонентом. Тут уся скриптова частина одразу, бо разом ці функції становлять майже все, що ви пишете. Таблиця перелічує функції Composition й макроси компілятора, якими компонент справді користується станом на Vue 3.5 (вересень 2026), за групами — із роботою, для якої кожну створено, і тим, як її зловживають. Номер версії позначає недавнє додавання.

API	Для чого він	Як його зловживають
ref	Будь-яке змінне значення — число, рядок, об’єкт; читають і пишуть через `.value`	Скопіювати `.value` у локальну змінну й чекати, що змінна стежитиме за ним
reactive	Об’єкт, кожна властивість якого відстежується, без `.value`	Замінити його цілком чи розкласти — обидва лишають екран із старим
shallowRef	Велике значення, яке замінюють цілком: відповідь API, список на десять тисяч рядків	Змінювати щось усередині — відстежується лише присвоєння `.value`
readonly	Передати стан дитині чи composable, які можуть його читати, але не писати	Вважати, що він заморожує джерело, — оригінал і далі змінюється, а подання за ним іде
computed	Значення, похідне від іншого стану, закешоване, доки не зміниться щось прочитане ним	Побічні дії всередині — запит, запис, лог; він може виконатися скільки завгодно разів або жодного
watch	Зробити щось, коли змінюється назване джерело: запит, запис у сховище, анімацію	Присвоювати в інший стан — це `computed`, написаний довгим шляхом, розділ третій
watchEffect	Те саме, але джерела знаходяться тим, що його один раз запускають і дивляться, що він читає	Випадково прочитати в ньому щось зайве — кожне торкнуте значення стає тригером
onWatcherCleanup	Скасувати те, що почав попередній запуск watcher, наприклад запит (3.5)	Викликати його після `await`, де Vue вже не знає, якому watcher він належить
toRef / toRefs	Витягти властивості з об’єкта `reactive`, не від’єднавши їх від нього	Застосовувати їх до звичайного об’єкта, з яким нема чого лишатися пов’язаним
toValue	Дати вашій функції приймати ref, геттер чи звичайне значення однаково (3.3)	Викликати його один раз на початку функції, тож пізніших змін ніхто не побачить
markRaw / toRaw	Не пускати в проксі сторонній об’єкт — карту, графік, екземпляр класу	Писати через `toRaw`: запис вдається, а на екрані нічого не оновлюється
nextTick	Дочекатися, поки DOM покаже зміну, яку ви щойно зробили	Загальне «зачекай трохи» — він чекає одного оновлення, не більше
defineProps	Оголосити, що компонент отримує від батька, разом із типами	Писати в проп із дитини — ним володіє батько
defineEmits	Оголосити події, які компонент надсилає батькові	Надсилати подію, яку ніхто не оголосив, — її не бачать ні TypeScript, ні читач
defineModel	Двобічне зв’язування для `v-model` без ручного пропа й події (3.4)	Змінювати отриманий через нього об’єкт на місці — об’єкт батька змінюється без жодної події
provide / inject	Передати значення на багато рівнів униз, не проносячи його через кожен	Глобальна змінна під маскою: ніхто не скаже, звідки взялося значення
useTemplateRef	Дістатися до елемента DOM чи дочірнього компонента зі скрипту (3.5)	Читати його до монтування компонента, поки він ще `null`
useId	Id, що пов’язує лейбл із полем і однаковий на сервері та в браузері (3.5)	Ключі для `v-for` — ключі беруться з даних
onMounted / onUnmounted	Запускати й зупиняти те, що живе поза Vue: слухача, таймер, графік	Додати слухача в одному й забути про інший — по витоку на кожне відвідування екрана
defineAsyncComponent	Завантажити код компонента лише тоді, коли він потрібен, а з 3.5 — ще й обрати, коли оживає відрендерений сервером HTML	Загортати кожен компонент: кожен — це ще один мережевий запит

Одне правило за таблицею

Vue відстежує значення, коли одночасно правдиві дві речі. Його читають через проксі чи ref, і його читають, поки виконується ефект, — рендер, computed, watcher. Порушіть будь-яку умову — і значення невидиме: Vue не може перезапустити те, читання чого він не бачив. Кожен рядок вище, чиє зловживання закінчується на «нічого не оновлюється», — це спосіб порушити одну з цих двох умов, а наступний розділ перелічує вісім таких способів, пронумерованих, із виправленням для кожного.

ref чи reactive?

Власна документація Vue радить ref() як основний спосіб оголошувати стан, і її причини — у колонці зловживань. reactive() не вміщує числа чи рядка, не замінюється цілком і втрачає зв’язок при розкладанні. У ref жодного з цих обмежень немає. Його ціна — .value у скрипті (шаблон розгортає його за вас), і цей суфікс варто цінувати, а не терпіти: це видимий шов, де звичайне значення стає відстежуваним. Беріть reactive для групи полів, які ви змінюєте лише по одному, як-от форма, а ref — для всього іншого.

Головне

Решта сторінки — це міркування за таблицею. Відстеження пояснює одне правило й вісім способів його порушити. Computed і watch пояснюють найдорожчий рядок. Шаблони пояснюють, чому Vue може пропускати під час виконання роботу, яку інші бібліотеки пропустити не можуть, і що Vapor Mode прибирає зовсім. Composables пояснюють, чому зникли міксини. А розділ про Vue 2 і Vue 3 — про міграцію, за яку багато кодових баз на Vue платять досі, зокрема один із найбільших відкритих застосунків на Vue у світі.

Залежність створює читання

Vue загортає ваш стан у проксі — об’єкт JavaScript, що стоїть перед іншим об’єктом і бачить кожне читання й кожен запис його властивостей. ref робить те саме для одного значення, тримаючи його в об’єкті з властивістю .value. Ця єдина можливість і є всією системою, а все інше на цій сторінці — її наслідки.

Поки виконується ефект — рендер компонента, обчислюване значення, watcher, — Vue знає, який ефект зараз поточний. Кожна властивість, прочитана під час цього виконання, записує ефект на себе. Це відстеження. Пізніше, коли у властивість пишуть, Vue перезапускає ефекти, записані саме на цю властивість, і більше нічого. Це запуск. Компонента, що значення не читав, навіть не питають, — тому зміна в одному кутку великої сторінки коштує стільки ж, скільки на маленькій.

Цей механізм ще й дешевшає. Vue 3.5 (вересень 2024) перебудував систему реактивності й скоротив її споживання пам’яті на 56%, а операції з масивами в деяких випадках стали до десяти разів швидшими. Vue 3.6, реліз-кандидат із липня 2026 року, перебудовує її знову — на alien-signals, невеликій бібліотеці, створеній саме для такого відстеження. Правила це не змінює. Це змінює, скільки відстежуваних значень може собі дозволити сторінка.

Вісім способів, якими значення перестає оновлюватися

Жоден із них не кидає помилки. Значення просто перестає йти за своїм джерелом, і баг виглядає як проблема рендерингу. На номери посилаються нижче на сторінці.

Ви написали	Що сталося насправді	Виправлення
1. `const { count } = state` з об’єкта `reactive`	Розкладання читає властивість один раз і копіює число з проксі.	Лишіть `state.count` або візьміть `toRefs(state)` і розкладайте вже його.
2. `const { count } = props` усередині функції `setup(props)`	Та сама копія. Пропси — такий самий реактивний об’єкт, як інші.	`toRefs(props)` або `<script setup>`, де з 3.5 компілятор сам перетворює `count` на `props.count`.
3. `watch(count, …)` на розкладеному пропі в `<script setup>`	Компілятор переписує читання, але `watch` отримує поточне число, а не джерело.	`watch(() => count, …)` — передайте геттер.
4. `state = reactive({ … })` удруге, із заміною всього об’єкта	Шаблон досі тримає перший проксі. Змінна тепер указує на інший, якого ніхто не читає.	Візьміть `ref` і присвоюйте `.value` або `Object.assign(state, next)`.
5. `useTotal(state.price)` — відстежуване значення, передане у вашу функцію	Аргумент обчислюється один раз, тож функція отримує число й ніколи не бачить змін.	Передайте `toRef(state, "price")` або `() => state.price` і читайте через `toValue` усередині.
6. `list.value.push(item)` на `shallowRef`	Неглибокий ref відстежує лише присвоєння `.value`, а не зміни всередині, — у цьому його призначення.	Присвойте новий масив, `list.value = [...list.value, item]`, або викличте `triggerRef(list)`.
7. Запис в оригінальний об’єкт, який ви передали в `reactive()`	Проксі стоїть перед оригіналом. Запис, що йде в обхід, ніхто не бачить.	Пишіть лише через проксі; не тримайте оригінал у змінній.
8. Значення, прочитане після `await` усередині `watchEffect`	Відстеження працює, лише поки функція виконується синхронно. Усе, прочитане після першого `await`, не є залежністю.	Прочитайте всі джерела до першого `await` або візьміть `watch` із явними джерелами.

Computed чи watch: значення чи дія

Це рішення розробники на Vue помиляють найчастіше, і в нього є чисте правило. computed виводить значення: він кешується, перераховується лише тоді, коли змінилося щось прочитане ним, і не має побічних дій. watch реагує на зміну дією — викликом API, записом у сховище, запуском анімації. Перевірка — одне питання: ви створюєте значення чи виконуєте дію?

Watcher, що закінчується присвоєнням в інший стан, майже завжди є computed, написаним довгим шляхом, а звичне пояснення — «він спрацьовує на такт пізніше» — близьке, але не зовсім механізм. computed лінивий: запис в одне з його джерел лише позначає його застарілим, а наступне читання перераховує його на місці, тож уже наступний рядок коду бачить нове значення. Колбек watcher натомість стає в чергу. За замовчуванням він виконується після того, як завершиться ваш поточний код, і перед тим, як Vue оновить компонента. Тож екран ніколи не помиляється — рендер чекає черги, — але кожен рядок скрипту між записом і чергою читає старе значення, а до першої зміни копія не містить нічого, якщо не додати immediate: true.

Ці ціни складаються: другий шматок стану, здатний розійтися з першим, значення, порожнє на першому рендері, і цикл того дня, коли два watcher почнуть писати в джерела один одного. У розробці Vue зупиняє такий цикл після сотні рекурсивних оновлень і попереджає «Maximum recursive updates exceeded» — і саме тоді більшість команд з’ясовує, що весь цей час у них був computed. Коли watcher доречний, лишається єдиний вибір — коли він виконується:

flush	Коли виконується колбек	Для чого
'pre' (типово)	У черзі; виконується до оновлення DOM компонента, тож DOM, який він бачить, — старий	Майже все: запити, сховище, логування
'post'	У черзі; виконується після оновлення DOM (`watchPostEffect` — скорочення)	Виміряти елемент, перевести фокус, передати DOM сторонній бібліотеці
'sync'	Одразу на кожен запис, без групування: десять записів — десять запусків	Рідко що в коді застосунку

Типова помилка

Watcher, що завантажує дані й ніколи не скасовує запит. Користувач набирає «ky», потім «kyi»; перший запит повільний, другий швидкий, тож старіша відповідь приходить останньою й перезаписує новішу. Сторінка про React малює ці перегони для ефекту, і у Vue ліки ті самі: з 3.5 викличте onWatcherCleanup(() => controller.abort()) на початку колбека, і Vue виконає це перед наступним запуском watcher. Викликайте до першого await — після нього Vue вже не знає, якому watcher належить очищення.

Шаблони, які може прочитати компілятор

Файл .vue містить три блоки: шаблон, скрипт і стилі. Аргумент за те, щоб тримати їх в одному файлі, — вони змінюються разом: правити компонент означає правити всі три. Блок стилів приймає атрибут scoped, і це справді корисний типовий вибір: Vue додає елементам компонента згенерований атрибут і обмежує ним кожен селектор, тож правило не може витекти в інший компонент. Це та сама локальність, заради якої зазвичай упроваджують методології CSS, — тільки її дає компілятор.

Сам шаблон — це HTML із директивами, атрибутами на v-, які Vue компілює в код. Шість із них виконують більшість роботи, і в кожної є одна пастка, яку варто знати до того, як вона спрацює:

Директива	Що робить	Пастка
v-if	Додає чи прибирає елемент; компоненти всередині щоразу створюються й знищуються	Важка панель, яку часто перемикають, — кожне перемикання будує її знову
v-show	Лишає елемент і перемикає його CSS-властивість `display`	Щось дороге, що показують рідко, — воно однаково рендериться на першому завантаженні
v-for + :key	Рендерить список; ключ — це тотожність кожного пункту між рендерами	Індекс як ключ: стан і фокус лишаються на позиції, коли дані рухаються
v-if з v-for	На одному елементі Vue 3 спершу обчислює `v-if`, тож умова не бачить змінної циклу	Код для Vue 2, де порядок був зворотний, — фільтруйте натомість у `computed`
v-model	Двобічне зв’язування: значення йде вниз, подія оновлення повертається вгору	Об’єкт, переданий через нього й змінений на місці, — батько змінюється без події
v-html	Вставляє рядок як сирий HTML, без жодного екранування	Будь-що, написане користувачем: це єдині двері для міжсайтового скриптингу, які Vue лишає відчиненими

У шаблону є друга робота, і саме через неї Vue зберіг шаблони, коли значна частина фронтенду перейшла на . Як і React, Vue рендерить через віртуальний DOM — легку копію сторінки, яку тримають у JavaScript: на кожному оновленні він будує нову копію, порівнює її з попередньою і змінює лише ті справжні вузли DOM, що різняться. Ціна — саме порівняння. Шаблон — обмежена мова, тож компілятор може його прочитати й ще до запуску сторінки знати, які частини можуть змінитися, а які ні. Vue називає результат віртуальним DOM, поінформованим компілятором. Статичні частини створюються один раз і використовуються повторно. Кожен динамічний вузол несе прапорець, що каже, що саме в ньому може змінитися, — текст, клас, один атрибут. А динамічні вузли всередині блоку зібрані в один плаский список, тож оновлення відвідує їх напряму, а не обходить усе дерево.

Vapor Mode доводить ту саму ідею до кінця. Він компілює компонент просто в операції з DOM, без віртуального DOM узагалі, і в сторонніх бенчмарках виходить на рівень Solid і Svelte 5. Він входить у Vue 3.6, що з липня 2026 року перебуває у статусі реліз-кандидата й ще не стабільний. Його вмикають окремо для кожного компонента через <script setup vapor>; він підтримує лише Composition API, без Options API; і поки що команда Vue радить його для однієї чутливої до продуктивності сторінки в наявному застосунку або для невеликого нового застосунку, повністю зробленого на ньому.

Composition API, Options API і composables

У Vue є два способи писати скрипт компонента, і обидва підтримуються. Options API, з якого Vue починав, групує код за видом: data, computed, methods, watch. Composition API, доданий у Vue 3, дозволяє групувати його за фічею — функціями з таблиці нагорі сторінки.

Composition API

Код згрупований за фічею, а не за видом опції
Логіка виноситься у звичайні функції — composables
Типи виводяться самі, не потребує допомоги
Типовий вибір для нового коду і єдиний, який компілює Vapor Mode

Options API

Код згрупований у data, computed, methods, watch
Перевикористання через міксини, походження яких важко відстежити
Легша перша година; важчий десятий компонент
Підтримується і поширений у наявному коді

Різниця видна в масштабі, а не на старті. У компоненті з трьома темами Options API розкидає кожну по чотирьох секціях, тож зрозуміти «як тут працює пошук» означає прочитати чотири місця й утримати їх разом. Composition API дозволяє трьом темам лежати трьома блоками — і винести будь-яку з них у composable, який імпортує інший компонент. Composable — це просто функція, чия назва починається з use і яка всередині викликає функції реактивності Vue: useSearch(), useMouse(), useFetch(url).

Composables замінили міксини, і документація Vue називає три причини. У міксинах було неясно, з якого міксина взялася властивість; два міксини могли зіткнутися на одному імені; а спілкувалися міксини через спільні властивості, яких ніхто не оголошував. У composable немає жодної з цих проблем, бо це звичайний виклик функції: те, що він повертає, видно там, де ви його викликаєте, і там же можна перейменувати.

Чотири правила для composable, що працює

Приймайте ref і геттери, а не лише звичайні значення, і читайте їх через toValue усередині watcher чи computed — інакше отримаєте рядок 5 таблиці. Повертайте об’єкт із ref, а не об’єкт reactive, щоб викликач міг його розкласти без рядка 1. Прибирайте те, що запустили, в onUnmounted. І викликайте його синхронно в <script setup>, до будь-якого await, щоб його хуки життєвого циклу знали, якому компоненту належать. Це останнє правило — єдине, що Vue має спільного з правилами хуків React, і з іншої причини: setup виконується один раз на компонент, а не на кожен рендер, тож оберігати порядок викликів не треба.

Від Vue 2 до Vue 3 і що йде в комплекті

Vue 3 вийшов у вересні 2020 року, і це не було оновлення у звичному сенсі. Систему реактивності перебудували на проксі, кілька можливостей Vue 2 прибрали, а офіційні інструменти довкола фреймворку замінили один за одним. Чимало матеріалів в інтернеті досі описують Vue 2, тож варто знати, яку половину туторіала ви читаєте:

Робота	Vue 2	Vue 3
Відстеження змін	`Object.defineProperty`: не бачить доданої властивості чи елемента масиву, заданого за індексом; прогалину закриває `Vue.set`	Проксі: бачить і те, й інше, а `Vue.set` зник
Написання компонента	Options API	Composition API з `<script setup>`; Options API досі підтримується
Спільний стан	Vuex	Pinia — Vuex у режимі підтримки
Старт проєкту	Vue CLI на webpack	`npm create vue` на Vite
Підтримка в редакторі	Vetur	Vue – Official (раніше Volar)
Події між непов’язаними компонентами	Шина подій на `$on`, `$off`, `$once`	Прибрано; пропси й події, сховище або невелика бібліотека-емітер
Форматування в шаблонах	Фільтри: `{{ price \| currency }}`	Прибрано; функція чи `computed`
Браузери	Разом з Internet Explorer 11	Лише сучасні браузери: проксі неможливо імітувати старішим JavaScript

Довкола ядра Vue стоїть між React і Angular за тим, скільки вирішує за вас. Це не бібліотека, що лишає все відкритим, і не фреймворк, що постачає всю архітектуру. У нього невеликий набір офіційних пакетів, і оскільки вони офіційні, екосистема збирається довкола них, а не розсипається: Vue Router для маршрутизації; Pinia для спільного стану, достатньо мала, щоб узяти її заради одного спільного значення не було надміром; Nuxt як фреймворк для серверного рендерингу, конвенцій маршрутизації й розгортання; і — інструмент збірки, який автор Vue почав 2020 року і яким тепер користується значна частина світу JavaScript, хай який у неї фреймворк. Систему реактивності навіть опубліковано окремо, як @vue/reactivity, і вона працює взагалі без компонентів — чесний сигнал того, де центр ваги фреймворку.

Vue проти React

Питання	Vue	React
Як стають відомі залежності?	Помічаються під час читання	Перелічуєте ви, перевіряє правило лінтера
Що виконується знову при зміні?	Лише ефекти, що читали значення	Компонент і все під ним
Як пишеться вигляд?	Шаблон, який аналізує компілятор	JSX — звичайний JavaScript
Хто визначає архітектуру?	Офіційні роутер і сховище	Ви або обраний вами фреймворк
Де губиться значення?	Скопійоване з проксі	Змінене на місці замість заміни

Жодна колонка не є вироком. Шаблон дає компілятору більше знань, тож Vue може пропускати під час виконання роботу, яку React мусить робити, — хоча React Compiler тепер закриває частину цієї різниці з іншого боку. JSX — це просто JavaScript, тож усе, що виражає мова, виражає й вигляд. Обирайте за двома речами, що справді різняться для команди: чи хочете ви отримати конвенції готовими і з якого пулу досвідчених розробників можете наймати.

П’ять кейсів і те, чого в кожному бракувало

Кожен кейс нижче задокументувала команда Vue або компанія, з якою він стався. Чотири — про власну історію Vue, бо найбільші уроки фреймворк вивчив публічно, а один — про те, скільки ця історія коштує великому застосунку, якому доводиться її пережити.

Кейс	Що сталося	Чого бракувало
Сліпі зони Vue 2, 2016–2020	Властивість, додана пізніше, чи елемент масиву, заданий за індексом, не оновлювали екран; обхідним шляхом був `Vue.set`	Механізм відстеження, що бачить кожен запис, — причина проксі у Vue 3
Vue 3 за замовчуванням, лют. 2022	Ядро вийшло у вересні 2020 року, а за замовчуванням стало лише через сімнадцять місяців	Роутер, сховище, інструменти й devtools, готові того ж дня, що й ядро
Reactivity Transform, 2023	Експериментальний синтаксис, що прибирав `.value`, відкликали; командам, які його взяли, довелося мігрувати назад	Правило не брати експериментальні можливості компілятора в продакшен-код
Кінець життя Vue 2, груд. 2023	31 грудня 2023 року Vue 2 перестав отримувати будь-які виправлення, зокрема безпекові	Міграція, запланована до цієї дати, а не після неї
GitLab, 2026	Майже через три роки після тієї дати більшість із 579 фронтенд-точок входу GitLab досі працює на Vue 2	Кодова база без шаблонів, які прибирає наступна мажорна версія

Перший кейс — звідки походить устрій Vue 3. Vue 2 робив дані реактивними, перетворюючи кожну наявну властивість на геттер і сеттер через Object.defineProperty — єдиний інструмент, що у 2014 році працював у JavaScript усюди. Інструмент умів перетворювати лише властивості, які вже існували. Властивість, додана після того, як об’єкт став реактивним, чи елемент масиву, присвоєний за індексом, ішли в обхід сеттерів, і екран не змінювався. Посібник Vue 2 перелічував ці випадки в розділі «Застереження щодо виявлення змін», а Vue.set існував, щоб їх обійти. Vue 3 перейшов на проксі, які перехоплюють кожне читання й запис, зокрема у властивості, яких іще не було. Ціною став Internet Explorer 11: проксі неможливо імітувати старішим JavaScript, тож Vue 3 там не працює.

Другий — урок про те, що таке реліз. Vue 3.0 вийшов 18 вересня 2020 року, і сімнадцять місяців npm install vue досі давав Vue 2. Команда Vue пояснила чому, коли нарешті перемкнула версію 7 лютого 2022 року: «Коли ядро Vue 3 було готове, більшість інших частин фреймворку або були в беті, або ще чекали на оновлення». Команда, що перейшла рано, мала швидше ядро й жодного стабільного роутера, сховища, підтримки в редакторі чи devtools до нього. Перемикання сталося тоді, коли Vite, Pinia, Volar і нові devtools були готові разом.

Reactivity Transform: чому `.value` лишився

Багатьом розробникам не подобається .value, і 2021 року команда Vue випустила експериментальну відповідь: перетворення компілятора, у якому let count = $ref(0) давав змінну, яку можна читати й присвоювати напряму, а .value компілятор додавав за лаштунками. 21 лютого 2023 року Еван Ю, автор Vue, оголосив, що від нього відмовляються, і перша причина була та, до якої постійно повертається ця сторінка: «Без .value важче зрозуміти, що відстежується і який рядок запускає реактивний ефект». Інші причини: команди користувалися ним лише у файлах .vue, тож одна кодова база тримала дві ментальні моделі, і він ділив спільноту на кодові бази, що ним користуються, і ті, що ні. У Vue 3.3 його позначили застарілим, а в 3.4, у грудні 2023 року, прибрали; окремий плагін, Vue Macros, зберіг його для команд, які не могли мігрувати одразу. Можливість від початку мала позначку «експериментальна» — саме тому для її прибирання не знадобилася мажорна версія, і саме тому всю ціну понесли команди, що випустили її в продакшен-коді.

Четвертий кейс має дату. Vue 2 досяг кінця життя 31 грудня 2023 року, і офіційна сторінка каже, що це означає, нічого не пом’якшуючи: Vue 2 «більше не отримує нових можливостей, оновлень чи виправлень». Версія 2.7.16 — остання, яка взагалі буде. Код працює далі й лишається на кожному CDN і в кожному реєстрі пакетів, тож 1 січня нічого не ламається, — і саме в цьому небезпека. Наступна вразливість, знайдена у Vue 2, не матиме офіційного виправлення, а власна порада сторінки організаціям, які не можуть перейти, — купити розширену підтримку в третьої сторони й повідомити клієнтам і відповідальному за безпеку, який у них план.

GitLab: міграція, що міряється точками входу

GitLab — один із найбільших відкритих застосунків, написаних на Vue, і свій перехід на Vue 3 він веде публічно. Його підхід — той, що Vue радить для великих кодових баз: запустити застосунок на @vue/compat, збірці Vue 3, яка імітує більшість поведінки Vue 2 і попереджає про решту, а потім переносити по одній ділянці. Посібник із фронтенду, прочитаний 30 вересня 2026 року, каже, що Vue 3 увімкнено для середовищ розробки і він «ще не готовий до продакшену». Епік міграції налічує 579 точок входу — окремих фронтенд-бандлів, з яких складається продукт, — і, за його таблицею статусів, оновленою в серпні 2026 року, приблизно кожну восьму вже розгорнули на Vue 3, кожну за власним . Посібник показує й те, куди йде час. Vue 3 прибрав $on, $once і $off, тож кожну шину подій — екземпляр Vue як канал повідомлень між непов’язаними компонентами, поширений шаблон Vue 2, — доводиться переписувати, а для бібліотек, що «покладаються на внутрішню будову Vue.js 2», команда писала адаптери. Нічого екзотичного. Це те, що кодова база накопичує, коли майже десять років будується на одній мажорній версії.

Де він вироджується

Репутація Vue як доступного фреймворку заслужена й трохи оманлива. Перший день справді легший: шаблон схожий на HTML, реактивність робить очікуване, і немає масиву залежностей, у якому можна помилитися. Те, що потребує уваги, приходить пізніше й дуже конкретне — точно знати, де значення лишається відстежуваним, а де його копіюють назовні, — бо кожна відмова в цій частині тиха. Ось форми, яких це набуває.

Розкладання чи копіювання відстежуваного значення тихо від’єднує його — рядки з 1 по 5.
Watcher, що присвоює в інший стан: computed, порожній спочатку й застарілий у проміжку.
Watcher-и, що завантажують дані без onWatcherCleanup, — повільна стара відповідь перезаписує швидку нову.
Глибоко реактивні великі дані: робота проксі тут реальна, а відповіддю був shallowRef.
Зміна пропа чи об’єкта, отриманого через v-model, ламає односторонній потік.
provide / inject як глобальна змінна ховає, звідки взялося значення.
v-html на будь-чому, що написав користувач.
Експериментальний синтаксис у продакшен-коді, який наступна мінорна версія має право прибрати.
Кодова база досі на Vue 2, яка з 31 грудня 2023 року не отримує жодних виправлень.

Є й чесна межа, вбудована в механізм, з якого почалася сторінка. Vue гарантує, що те, що читає значення, перезапуститься, коли значення зміниться. Він нічого не каже про те, чи правильне значення, і не може відстежити те, чим не володіє: стан, що живе в сторонній бібліотеці, у Web API чи в замиканні, невидимий, доки ви не внесете його в ref. Друга межа — ринок найму, і вона не технічна: на багатьох ринках він менший, ніж у React, і це важить більше за будь-який бенчмарк, коли команда змінюватиметься.

Практична перевірка займає хвилину. Відкрийте Vue DevTools і подивіться, що перерендерилося після тієї однієї дії, заради якої існує екран. Коли щось оновлюється, хоча не мало б, або не оновлюється, хоча мало б, додайте в компонент onRenderTriggered: у розробці він точно каже, яке читання якої властивості запустило кожен рендер. Значення, яке там ніколи не з’являється, ніколи й не відстежувалося, — а таблиця в другому розділі пояснює чому.

Коли це застосовувати

Застосовуйте, коли

Ви хочете офіційних відповідей щодо маршрутизації, стану й збірки, а не вправи з порівняння.
У команді є люди, які пишуть більше розмітки, ніж JavaScript, — шаблони пасують цій формі.
Вам потрібні оновлення, що досягають лише зміненого, без ручного налаштування перерендерів.
Скоуповані стилі за замовчуванням замінять методологію CSS, яку інакше довелося б упроваджувати.

Уникайте, коли

Локальний ринок праці переважно React, і команда змінюватиметься.
Проєкт залежить від бібліотек, які сьогодні існують лише для React.
Сторінка майже без стану — реактивний механізм стане накладною витратою без застосування.
Ніхто не вивчить, де значення перестає відстежуватися, — і тихі відмови стануть дорогими.

Джерела й метод

На чому стоїть ця стаття

12 джерел
Перевірено 13 жовтня 2026 р.

Практики й походження термінів

Composition API на одному екрані, реактивність, watchers і версії

Дослідження з Claude. Пошук і звірку першоджерел зроблено з Claude (Anthropic). Відбір, текст і перевірку фактів — редакція Anatomy of IT Product.

Було корисно?

Поділіться з тим, хто працює над тією ж задачею.