Введение

Информация

Новичок во Vue.js? Начинать изучение лучше с руководства.

Это руководство в первую очередь предназначено для пользователей с опытом работы во Vue 2, которые хотят узнать о новых функциях и изменениях во Vue 3. Это не то, с чего надо начинать изучение и читать от начала до конца, прежде чем пробовать Vue 3. Несмотря на кажущиеся многочисленные изменения, многое что уже знаете и любите во Vue осталось прежним; просто хотим как можно основательнее и подробнее дать объяснения и примеры для каждого произошедшего изменения.

• Быстрый старт
• Сборка для миграции
• Важные новые возможности
• Кардинальные изменения
• Поддержка библиотек

Обзор

Начать изучение Vue 3 на Vue Mastery (opens new window) (на англ.).

Быстрый старт

Если хотите попробовать Vue 3 в новом проекте:

• Через CDN: <script src="https://unpkg.com/vue@next"></script>

• Песочница в браузере на Codepen (opens new window)

• Песочница в браузере на CodeSandbox (opens new window)

• Развернуть проект с помощью Vite (opens new window):

  npm init vite hello-vue3 -- --template vue # ИЛИ yarn create vite hello-vue3 --template vue
  

• Развернуть проект с помощью vue-cli (opens new window):

  npm install -g @vue/cli # ИЛИ yarn global add @vue/cli
  vue create hello-vue3
  # выбрать пресет vue 3
  

Сборка для миграции

Если собираетесь обновить до Vue 3 существующий проект или библиотеку на Vue 2, стоит воспользоваться специальной сборкой Vue 3, которая предоставляет API, совместимые с Vue 2. Более подробную информацию можно найти на странице про сборку для миграции.

Важные новые возможности

Некоторые из новых функций, которые появились во Vue 3:

• Composition API
• Телепорты
• Добавлены фрагменты
• Добавлена опция emits в компонентах
• createRenderer API из @vue/runtime-core (opens new window) для создания пользовательских рендеров
• Однофайловые компоненты: синтаксический сахар Composition API (<script setup>)
• Однофайловые компоненты: CSS-переменные на основе состояния (v-bind в <style>)
• Однофайловые компоненты: <style scoped> теперь могут содержать глобальные правила или правила только для содержимого слотов (opens new window)
• Добавлен компонент suspense экспериментально

Кардинальные изменения

Ниже приведён список кардинальных изменений в сравнении с 2.x:

Глобальное API

• Глобальное API Vue теперь применяется к экземпляру приложения
• Глобальное и внутреннее API были реорганизованы для поддержки tree-shaking

Директивы в шаблонах

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

Компоненты

• Функциональные компоненты могут создаваться только простыми функциями
• Удалён атрибут functional для <template> однофайловых компонентов, а также удалена опция functional в компонентах
• Создание асинхронных компонентов теперь с помощью метода defineAsyncComponent
• События компонента теперь должны описываться с помощью опции emits

Render-функции

• Изменён API render-функций
• Удалено свойство $scopedSlots, теперь все слоты доступны как функции через $slots
• Удалено свойство $listeners / теперь всё в $attrs
• Свойство $attrs теперь содержит class и style

Пользовательские элементы

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

Другие незначительные изменения

• Хук жизненного цикла destroyed переименован в unmounted
• Хук жизненного цикла beforeDestroy переименован в beforeUnmount
• Удалён доступ к this в функции значения по умолчанию входного параметра
• Переименованы функции хуков директив, чтобы лучше соответствовать жизненному циклу компонента, а также удалено binding.expression
• Опцию data необходимо указывать только функцией
• Опция data из примесей теперь объединяется неглубоко
• Изменено поведение при приведении значения атрибутов
• Переименованы некоторые классы transition
• Корневой элемент <TransitionGroup> больше не создаётся по умолчанию
• Отслеживание изменений массива с помощью watch будет вызывать обработчик только при замене массива. При необходимости отслеживаний изменений необходимо указывать опцию deep.
• Теги <template> без специальных директив (v-if/else-if/else, v-for или v-slot) теперь обрабатываются как обычные элементы и в результате будет отрисован нативный элемент <template> вместо отрисовки его содержимого
• Монтируемое приложение не заменяет элемент, к которому монтируется
• Префикс событий жизненных хуков hook: был изменён на vnode-

Удалённые API

• Удалена поддержка keyCode в модификаторах v-on
• Удалены методы экземпляра $on, $off и $once
• Удалены фильтры
• Удалена поддержка атрибута inline-template
• Удалено свойство экземпляра $children
• Удалена опция propsData
• Удалён метод экземпляра $destroy. Пользователи больше не должны вручную управлять жизненным циклом отдельных компонентов Vue.
• Удалены глобальные функции set и delete и методы экземпляра $set и $delete. При использовании прокси для отслеживания изменений они больше не нужны.

Поддержка библиотек

Все официальные библиотеки и инструменты поддерживают Vue 3, но некоторые из них ещё находятся в бета-версии или в статусе релиз-кандидата. Подробная информация по отдельным библиотекам будет ниже. Многие из них на данный момент распространяются под тегом next в npm. Переключение на использование тега latest планируется, когда все официальные библиотеки будут иметь совместимые и стабильные версии.

Vue CLI

Начиная с версии v4.5.0, vue-cli предоставляет из коробки опцию для выбора Vue 3 при создании нового проекта. Можно обновить vue-cli и выполнить команду vue create для создания проекта на Vue 3 уже сегодня.

• Документация (opens new window)
• GitHub (opens new window)

Vue Router

Vue Router 4.0 предоставляет поддержку Vue 3 и имеет ряд собственных кардинальных изменений. Для получения более подробной информации ознакомьтесь с его руководством по миграции (opens new window).

• Документация (opens new window)
• GitHub (opens new window)
• RFCs (opens new window)

Vuex

Vuex 4.0 предоставляет поддержку Vue 3 с тем же самым API, что и 3.x. Единственное кардинальное изменение заключается в том как устанавливается плагин (opens new window).

• GitHub (opens new window)

Расширение инструментов для разработчика

Сейчас идёт работа над новой версией Devtools с новым интерфейсом и переработанной внутренней частью для поддержки нескольких версий Vue. Новая версия в настоящее время находится в бета-тестировании и поддерживает только Vue 3 (на данный момент). Также ведётся работа над интеграцией обновлённых версий Vuex и Router.

• Для Chrome: Установить из магазина приложений Chrome (opens new window)

  • Примечание: канал обновлений с бета-версиями может конфликтовать со стабильной версией devtools, поэтому может потребоваться отключить стабильную версию для корректной работы канала обновлений с бета-версиями.

• Для Firefox: Скачать подписанное расширение (opens new window) (файл .xpi в Assets)

Поддержка IDE

Рекомендуется использовать VSCode (opens new window) с нашим официальным расширением Volar (opens new window), которое обеспечивает IDE всестороннюю поддержку Vue 3.

Другие проекты

Проект	npm	Репозиторий
@vue/babel-plugin-jsx	(opens new window)	[GitHub (opens new window)]
eslint-plugin-vue	(opens new window)	[GitHub (opens new window)]
@vue/test-utils	(opens new window)	[GitHub (opens new window)]
vue-class-component	(opens new window)	[GitHub (opens new window)]
vue-loader	(opens new window)	[GitHub (opens new window)]
rollup-plugin-vue	(opens new window)	[GitHub (opens new window)]

Информация

Для получения дополнительной информации о совместимости библиотек и плагинов с Vue 3, обязательно ознакомьтесь с этим issue в awesome-vue (opens new window).