По состоянию на март 2023 года всем разработчикам программного обеспечения, использующим Vue 2 в качестве интерфейсной среды, в ближайшем будущем может потребоваться перейти на Vue 3 *возможно* по следующим причинам:
1. Поддержка Vue 2 закончится 31 декабря 2023 г.
2. Vue 3 уже стабилен. Последним стабильным выпуском является версия 3.2.45, выпущенная 11 ноября 2022 года.
3. Vue 3 имеет некоторые новые примечательные функции, которых не было у vue 2.
И вот 3 из новых функций Vue 3, на которые вам нужно обратить внимание:
- API композиции
- Фрагменты
- Переменные CSS, управляемые состоянием SFC (v-bind в ‹style /›)
API композиции
Composition API — это набор API, который позволяет нам создавать компоненты Vue, используя импортированные функции вместо объявления параметров. Это общий термин, охватывающий API реактивности, обработчики жизненного цикла и внедрение зависимостей.
Для более старых версий Vue на самом деле также может использовать API композиции, но разница в том, что Vue 3 уже включает API композиции внутри плагина vue, а для более старой версии Vue его необходимо устанавливать отдельно с помощью плагина vue/composition-api.
Вот пример реализации API композиции в Vue 3 по сравнению со старой версией:
- Вью 3
- Вью 2
Фрагменты
В vue 3 теперь у нас может быть несколько корневых узлов, например:
Но это требует, чтобы мы определили, где атрибуты (такие как класс или событие щелчка) должны распределяться с помощью v-bind.
Это сильно отличается от vue 2.x, где у нас не может быть более одного корневого узла, поэтому мы должны обернуть все узлы одним узлом, например ‹div /›.
Переменные CSS, управляемые состоянием SFC (v-bind в ‹style›)
В vue 3 теперь мы можем связать значение стиля css со значением состояния, используя v-bind. Например, вы можете иметь значение цвета в состоянии компонента, а затем использовать его для определения значения стиля цвета в css следующим образом:
Эта функция также работает с настройкой скрипта и поддержкой выражений javascript:
