# Введение
Информация
Новичок в Vue.js? Начинать изучение лучше с руководства.
Это руководство в первую очередь предназначено для пользователей с опытом работы с Vue 2, которые хотят узнать о новых функциях и изменениях во Vue 3. Это не то, с чего надо начинать изучение и читать от начала до конца, прежде чем пробовать Vue 3. Несмотря на то, что кажется многое изменилось, многое что знаете и любите во Vue осталось прежним; просто мы хотим как можно основательнее и подробнее дать объяснения и примеры для каждого произошедшего изменения.
# Обзор
Начать изучение Vue 3 на Vue Mastery (opens new window) (на англ.).
# Быстрый старт
Через CDN:
<script src="https://unpkg.com/vue@next"></script>
Песочница в браузере на Codepen (opens new window)
Песочница в браузере на CodeSandbox (opens new window)
Развернуть проект с помощью Vite (opens new window):
npm init @vitejs/app hello-vue3 # OR yarn create @vitejs/app hello-vue3
1Развернуть проект с помощью vue-cli (opens new window):
npm install -g @vue/cli # ИЛИ yarn global add @vue/cli vue create hello-vue3 # выбрать пресет vue 3
1
2
3
# Важные новые возможности
Некоторые из новых функций, которые появились во Vue 3:
- Composition API
- Телепорты
- Добавлены фрагменты
- Добавлена опция emits в компонентах
createRenderer
API из@vue/runtime-core
(opens new window) для создания пользовательских рендеров- SFC Синтаксический сахар для Composition API (
<script setup>
) (opens new window) экспериментально - SFC CSS-переменные на основе состояния (
v-bind
in<style>
) (opens new window) экспериментально - SFC
<style scoped>
теперь могут содержать глобальные правила или правила только для содержимого слотов (opens new window) - Suspense experimental
# Кардинальные изменения
Информация
Всё ещё ведётся работа над созданием специальной сборки для перехода на Vue 3 с поведением, совместимым с Vue 2, и выводом предупреждений о предстоящих несовместимостях при миграции. Если планируете миграцию большого приложения на Vue 2, рекомендуемся дождаться этой сборки для более спокойного перехода.
Ниже приведён список кардинальных изменений в сравнении с 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
в функции значения по умолчанию входного параметра - Переименованы функции хуков директив, чтобы лучше соответствовать жизненному циклу компонента
- Опцию
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 уже сегодня.
# Vue Router
Vue Router 4.0 предоставляет поддержку Vue 3 и имеет ряд собственных кардинальных изменений. Для получения более подробной информации ознакомьтесь с его руководством по миграции (opens new window).
# Vuex
Vuex 4.0 предоставляет поддержку Vue 3 с тем же самым API, что и 3.x. Единственное кардинальное изменение заключается в том как устанавливается плагин (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) с нашим официальным расширением Vetur (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).