Хотя дата выпуска не установлена, дорожная карта для Vue 3 показывает, что его альфа-запуск состоится в первой половине этого года. С тех пор, как Эван Ю рассказал о новом Vue 3 и его новых функциях, в сообществе Vue было много ожиданий и немного жарко, особенно вокруг нового Composition API.

В этой статье рассказывается о более интересных функциях, которые появятся в Vue 3. Если вы хотите узнать больше о новом выпуске, вам следует прочитать Планы на следующую итерацию в блоге.

Что предлагает V3

  • Composition API : почти в каждом посте о V3 должна быть ссылка на композиционный api. Это одна из, если не самая большая вещь, которая может повлиять на то, как разработчики пишут свой код. Были некоторые опасения по поводу того, что люди тратят время на изучение Vue и что он превращается в React (и я согласен, что теперь это действительно похоже на реакцию, некоторые новые функции были вдохновлены сообществом React ... lol).
    Эта новая функция решает две основные проблемы. Во-первых, по мере того, как компоненты становятся более сложными, к ним добавляется больше функций и над ними работают разные разработчики, читателю становится все труднее понять, особенно если это не код, который он написал, это также делает его менее удобным в обслуживании. Во-вторых, нет эффективного способа повторного использования логики между компонентами, каждый метод совместного использования кода в V2 имеет некоторые очевидные недостатки.
    В V2 компоненты создаются с помощью API параметров, мы заполняем различные свойства, такие как данные , методы и так далее, чтобы добавить логику нашему компоненту. Обратной стороной этого является то, что вам необходимо знать, какие свойства доступны в шаблоне, и поведение ключевого слова this. Vue также необходимо преобразовать эти свойства в реальный рабочий код. Из-за этого мы не можем воспользоваться такими вещами, как автоматические подсказки или проверка типов.
    Composition API решает эту проблему, предоставляя свойства компонента как функции JavaScript. Это позволяет использовать функциональный подход к написанию компонентов, он был вдохновлен React Hooks. Благодаря этому легче инкапсулировать логику в функции композиции и повторно использовать их в различных компонентах. Дополнительную техническую информацию вы можете найти в документе Composition API RFC.
  • Весь фреймворк будет переписан на Typescript. Конечно, это не влияет на то, кто решает создавать свои приложения с помощью Javascript. Это просто делает его более быстрым и совместимым с Typescript.
  • Функциональные компоненты должны быть написаны как простые компоненты, в то время как асинхронные компоненты должны быть явно созданы с помощью метода API createAsyncComponent. В основном в V3 SFC (компоненты с отслеживанием состояния) смогут делать все, что может делать функциональный компонент, и даже больше (он будет поддерживать фрагменты и управлять наследованием атрибутов), поэтому функциональные компоненты будут делать меньше. Просто файл .js без шаблона или стилей.
    Компоненты с отслеживанием состояния также инициализируются быстрее, а в версии 3 разница в производительности между SFC и функциональными компонентами в основном незначительна.
  • V3 будет иметь поддержку порталов. Если вы раньше работали с React, то, скорее всего, слышали о порталах. Это хороший способ визуализировать компоненты вне текущей иерархии Dom. Это то, что говорится о порталах в документации по реакции.
    Порталы предоставляют первоклассный способ визуализации дочерних элементов в узле DOM, который существует вне иерархии DOM родительского компонента.
    Создание порталов - это простой и эффективный способ создания модальных окон, всплывающих окон и т.п., не беспокоясь об иерархии DOM. В настоящее время, если вы хотите использовать порталы, вам необходимо установить плагин, например portal-vue.
  • На одном элементе можно будет использовать несколько v-моделей. v-model - это директива, используемая для обеспечения двусторонней привязки к компоненту. Любой компонент может иметь v-модель, в V2 у них может быть только одна модель, в то время как в V3 вы сможете использовать несколько директив v-model для одного и того же элемента. Мне интересно, как разработчики будут использовать это без затруднений.
  • Фрагменты будут поддерживаться "из коробки". Фрагмент - это виртуальный элемент, который позволяет вам иметь более одного корневого узла в компоненте. В настоящее время в SFC разрешен только один корневой узел, другой вариант - использовать функциональный компонент. Чтобы использовать фрагменты в v2, вам необходимо скачать плагин.
  • Глобальное изменение api монтажа
CURRENT
import Vue from 'vue' 
import App from './App.vue' 
 
Vue.config.ignoredElements = [/^app-/] 
Vue.use(/* ... */) 
Vue.mixin(/* ... */) 
Vue.component(/* ... */) 
Vue.directive(/* ... */)  
new Vue({   render: h => h(App) }).$mount('#app')
PROPOSED
import { createApp } from ‘vue’ 
import App from ‘./App.vue’ 
const app = createApp(App) \
app.config.ignoredElements = [/^app-/] 
app.use(/* … */) 
app.mixin(/* … */) 
app.component(/* … */) 
app.directive(/* … */) 
app.mount(‘#app’)

Причина этого изменения в том, что вам не нужно изменять глобальный объект. некоторые из глобальных API и конфигураций v2 постоянно изменяют состояние, что может привести к некоторым проблемам, таким как любые изменения, вносимые в объект vue, влияющие на все остальные экземпляры и компоненты.

Заключение

V3 обещает быть более компактным, быстрым и надежным, меня особенно интересует, как изменится структура кода с новым API композиции (если вы хотите использовать API композиции с V2, вы можете сделать это с помощью пакета API композиции).