Эта статья — перевод оригинальной статьи Evan You "Vue 2.7 is Now in Beta!"
Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.
Вступление
Мы рады сообщить, что Vue 2.7 находится в стадии бета-тестирования.
Несмотря на то, что Vue 3 теперь является версией по умолчанию, мы понимаем, что многие пользователи все еще вынуждены оставаться на Vue 2 из-за несовместимости зависимостей, требований поддержки браузера или просто недостаточности времени для перехода. В Vue 2.7 мы перенесли некоторые из наиболее важных функций из Vue 3, чтобы пользователи Vue 2 также могли извлечь из них пользу.
Перенесённые функции
Кроме того, также поддерживаются следующие API:
defineComponent() с улучшенным выводом типа (по сравнению с Vue.extend)
h(), useSlot(), useAttrs(), useCssModules()
set(), del() и nextTick() также предоставляются как именованные экспорты в сборках ESM.
Параметр emits также поддерживается, но только для целей проверки типов (не влияет на поведение во время выполнения).
2.7 также поддерживает использование синтаксиса ESNext в выражениях шаблона. При использовании системы сборки функция рендеринга скомпилированного шаблона будет проходить через те же загрузчики/плагины, настроенные для обычного JavaScript. Это означает, что если вы настроили Babel для файлов .js, это также будет применяться к выражениям в ваших шаблонах SFC.
Примечания о раскрытии API
В сборках ESM эти API предоставляются как именованные экспорты (и только именованные экспорты):
import Vue, { ref } from 'vue'
Vue.ref // undefined, use named export insteadВ сборках UMD и CJS эти API представлены как свойства глобального объекта Vue.
Отличия поведения от Vue 3
Composition API переносится с использованием системы реактивности Vue 2 на основе getter/setter для обеспечения совместимости с браузерами. Это означает, что есть некоторые важные отличия в поведении от прокси-системы Vue 3:
Все предостережения об обнаружении изменений Vue 2 остаются в силе.
reactive(), ref() и smallReactive() будут напрямую преобразовывать исходные объекты, а не создавать прокси. Это означает:
// true in 2.7, false in 3.x
reactive(foo) === fooreadonly() создает отдельный объект, но не отслеживает вновь добавленные свойства и не работает с массивами.
Избегайте использования массивов в качестве корневых значений в reactive(), потому что без доступа к свойству изменение массива не будет отслеживаться (это приведет к предупреждению).
API-интерфейсы реактивности игнорируют свойства с символьными ключами.
Кроме того, следующие функции НЕ перенесены:
❌ createApp() (Vue 2 не имеет изолированной области приложения)
❌ Top-level await в <script setup> (Vue 2 не поддерживает инициализацию асинхронного компонента)
❌ Синтаксис TypeScript в выражениях шаблона (несовместим с парсером Vue 2)
❌ Преобразование реактивности (все еще экспериментально)
❌ Опция expose не поддерживается для опций компонентов (но поддерживается defineExpose() в <script setup>).
Руководство по внедрению бета-версии
Версия 2.7 в настоящее время находится на стадии бета-тестирования, и в ней все еще могут быть шероховатости. Пожалуйста, помогите нам проверить его стабильность, приняв участие в бета-тестировании. Вот как:
Vue CLI
Обновите локальные зависимости @vue/cli-xxx до последней версии в вашем основном диапазоне версий: ~4.5.18 for v4, ~5.0.6 for v5
Обновите vue до v2-beta или закрепите за собой определенную версию (последняя бета-версия на момент написания этой статьи — 2.7.0-beta.3). Также можно убрать из зависимостей vue-template-compiler — в 2.7 он больше не нужен.
Если вы ранее использовали @vue/composition-api, измените импорт из него на vue.
Подпишитесь на бета-версию vue-loader v15. Поскольку vue-loader является транзитивной зависимостью от @vue/cli-service, вам нужно будет заставить менеджер пакетов явно использовать бета-версию. Принудительное разрешение больше не понадобится, когда оно станет стабильным. Для npm (>=8.3.0) используйте поле overrides в package.json.
Для Vue CLI v4:
{
"overrides": {
"vue-loader": "^15.10.0-beta.6"
}
}Для Vue CLI v5:
{
"overrides": {
"@vue/vue-loader-v15": "npm:vue-loader@^15.10.0-beta.6"
}
}Для yarn используйте поле resolutions в package.json.
Для Vue CLI v4:
{
"resolutions": {
"vue-loader": "^15.10.0-beta.6"
}
}Для Vue CLI v5:
{
"resolutions": {
"@vue/vue-loader-v15": "npm:vue-loader@^15.10.0-beta.6"
}
}Для pnpm используйте pnpm.overrides:
Для Vue CLI v4:
{
"pnpm": {
"overrides": {
"vue-loader": "^15.10.0-beta.6"
}
}
}Для Vue CLI v5:
{
"pnpm": {
"overrides": {
"@vue/vue-loader-v15": "npm:vue-loader@^15.10.0-beta.6"
}
}
}Если вы ранее использовали какие-либо библиотеки, которые полагаются на vue-demi (например, VueUse или Pinia), вам может потребоваться удалить файл блокировки и выполнить новую установку npm для обновления до последней версии vue-demi.
Компилятор SFC для 2.7 теперь использует PostCSS 8 (обновлено с 7). PostCSS 8 должен быть обратно совместим с большинством плагинов, но обновление может вызвать проблемы, если вы ранее использовали пользовательский плагин PostCSS, который может работать только с PostCSS 7. В таких случаях вам нужно будет обновить соответствующие плагины до их совместимости с PostCSS 8-ой версии.
Vite
2.7 поддержка Vite обеспечивается через новый плагин: @vitejs/plugin-vue2. Этот новый плагин требует Vue 2.7 или выше и заменяет существующий vite-plugin-vue2.
Обратите внимание, что новый плагин не обрабатывает специфичные для Vue преобразования JSX/TSX, что сделано намеренно. Преобразование Vue 2 JSX/TSX должно обрабатываться в отдельном специальном плагине.
Совместимость с Volar
2.7 содержит улучшенные определения типов, поэтому больше нет необходимости устанавливать @vue/runtime-dom только для поддержки вывода типов шаблонов Volar. Все, что вам нужно сейчас, это следующая конфигурация в tsconfig.json:
{
// ...
"vueCompilerOptions": {
"target": 2.7
}
}Последствия версии 2.7
Выход стабильной версии 2.7 запланирован на конец июня 2022 года. Как уже говорилось ранее, это будет последний второстепенный выпуск Vue 2.x. Как только 2.7 будет выпущена как стабильная, Vue 2 больше не будет получать новые функции и перейдет на LTS (долгосрочную поддержку), которая длится 18 месяцев.
Это означает, что срок службы Vue 2 прекратится к концу 2023 года. Мы считаем, что это должно дать достаточно времени для перехода большей части экосистемы на Vue 3. Однако мы также понимаем, что могут быть команды или проекты, которые не могут обновиться. к этому сроку все еще необходимо выполнить требования безопасности и соответствия. Мы планируем предоставить расширенную поддержку Vue 2 для команд с такими потребностями — если ваша команда планирует использовать Vue 2 после конца 2023 года, обязательно спланируйте это заранее.
