Несумісні зміни #

На цій сторінці перераховано всі зміни Vue 3, які порушують роботу Vue 2.

Хоча здається, що багато чого змінилося, багато з того, що ви знаєте та любите про Vue, залишається незмінним; але ми хотіли бути максимально детальними та надати докладні пояснення та приклади для кожної задокументованої зміни.

Деталі #

Глобальний API #

• API Global Vue змінено для використання екземпляра програми
• Глобальні та внутрішні API було реструктуровано, щоб вони могли трясти дерево

Директиви шаблонів #

• v-model використання компонентів було перероблено, замінивши v-bind.sync
• використання key на вузлах <template v-for> і не-v-for змінено
• змінено пріоритет v-if і v-for при використанні для того самого елемента
• v-bind="object" тепер чутливий до порядку
• v-on:event.native модифікатор видалено

Компоненти #

• Функціональні компоненти можна створити лише за допомогою простої функції
• Атрибут 'functional' однофайлового компонента (SFC) <template> і параметр компонента functional застаріли
• Асинхронні компоненти тепер потребують створення методу defineAsyncComponent
• Події компонентів тепер слід оголошувати за допомогою параметра emits

Функція візуалізації #

• API функції відтворення змінено
• Властивість $scopedSlots видалено, а всі слоти доступні через $slots як функції
• $listeners було видалено/об’єднано в $attrs
• $attrs тепер включає атрибути class і style

Спеціальні елементи #

• Перевірки користувацьких елементів тепер виконуються під час компіляції шаблону
• Використання спеціального атрибута is обмежено лише зарезервованим тегом <component>

Інші незначні зміни #

— Параметр destroyed життєвого циклу було перейменовано на unmounted.

• Опцію життєвого циклу beforeDestroy було перейменовано на beforeUnmount
• Фабрична функція реквізитів default більше не має доступу до контексту this
• API спеціальної директиви змінено для узгодження з життєвим циклом компонента, а binding.expression видалено
• Параметр data завжди слід оголошувати як функцію
• Параметр data з міксинів тепер об’єднано поверхнево
• Стратегію примусу атрибутів змінено
• Деякі класи переходу перейменовано
• <TransitionGroup> тепер не відображає елемент оболонки за замовчуванням
• Під час перегляду масиву зворотний виклик запускатиметься лише тоді, коли масив буде замінено. Якщо вам потрібно запустити мутацію, необхідно вказати опцію deep.
• Теги <template> без спеціальних директив (v-if/else-if/else, v-for або v-slot) тепер розглядаються як звичайні елементи та призведуть до рідного <template> замість відтворення його внутрішнього вмісту.
• Змонтована програма не замінює елемент, до якого вона змонтована
• Префікс подій життєвого циклу hook: змінено на vnode-

Видалені API #

• підтримка keyCode як модифікаторів v-on
• методи екземплярів $on, $off і $once
• Фільтри
• Атрибути вбудованих шаблонів
• властивість екземпляра $children
• параметр "propsData"
• Метод екземпляра $destroy. Користувачі більше не повинні вручну керувати життєвим циклом окремих компонентів Vue.
• Глобальні функції set і delete, а також методи екземплярів $set і $delete. Вони більше не потрібні для виявлення змін на основі проксі.