Что нового в Vue 3

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

Новые функции в Vue 3

API композиции
Полная поддержка TypeScript
Порталы
Фрагменты
саспенс
Глобальное изменение API монтирования/конфигурации
Несколько v-моделей
Пользовательский API директив

До официального релиза вы можете использовать бета-версию Vue 3, найденную в репозитории vue-next GitHub. Некоторые из новых функций Vue 3 доступны в виде плагинов для Vue 2, и я упомяну о них, когда мы доберемся до них. В Vue 3 эти функции встроены, что дает разработчикам более удобный мгновенный опыт работы с Vue (те, кто работал с Vue, понимают небольшие проблемы, с которыми мы сталкиваемся).

Vue — это не «просто еще один фреймворк». Vue разработан как интерфейсная структура для веб-приложений, чтобы помочь вам создать «представление» для вашего приложения. Его можно использовать с React и Angular, которые являются монолитными фреймворками, для обеспечения пользовательского интерфейса, в то время как за кулисами у вас есть Angular и React, выполняющие остальную работу.

API композиции

Composition API — это альтернатива текущему API Vue Options. Он разработан с учетом поддержки Typescript, а также повторного использования кода, удобства сопровождения и объединения функций по логическому принципу.

Как это соотносится с API опций? Использование API параметров в простом компоненте может очень быстро привести к путанице, поскольку у вас есть данные, методы, реквизиты, компоненты, вычисляемые значения и многое другое. Каждый раздел может содержать несколько разделов функциональности — и теперь они распределены между разными разделами вашего кода.

Как это может выглядеть в компоненте стиля сетки данных? В приведенном ниже примере показаны только варианты и список того, что можно — и, вероятно, найти — в каждом разделе. Если бы вы написали этот компонент полностью, это был бы большой кусок кода.

<script>
export default {
  data () {
    return {
      //Properties for data
      //Properties for filtering
      //Properties for sorting
      //Properties for paging
    }
  },
  methods: {      
    //Methods for data
    //Methods for filtering
    //Methods for sorting
    //Methods for paging
  },
  computed: {
    //Values for data
    //Values for filtering
    //Values for sorting
    //Values for paging
  }
}
</script>

Как видите, функциональность для каждого логического сегмента разделена между отдельными параметрами API параметров.

Composition API делает его более удобным для сопровождения и читабельным. В нем представлен метод настройки, который работает следующим образом в разделе примера сценария, где мы удваиваем число.

<script>
import { ref } from "@vue/composition-api"
export default {
  setup () {
    const theNumber = ref(1)
    function doubleTheNumber () {
      theNumber.value = parseInt(theNumber.value) * 2
    }
    return {
      theNumber,
      doubleTheNumber
    }
  }
}
</script>

Означает ли это, что вы собираетесь использовать один огромный метод настройки для всех своих компонентов? Нет, это не так. Вы можете использовать функции композиции в другом месте (в других файлах), чтобы не раздувать ваш метод установки. Это имеет явное преимущество разделения кода и повторного использования. Функция композиции может использоваться в любом количестве компонентов.

Джоэл Паркс описывает Начало работы с Vue 3 Component API в другой статье.

Полная поддержка TypeScript

Vue 3 поставляется с полной поддержкой TypeScript. Vue 2 смог приспособить TypeScript — вы могли встроить его в свое приложение Vue 2. Это была не лучшая компоновка, и во многих случаях она выглядела изрубленной.

Vue 3 написан на TypeScript с автоматически сгенерированными определениями типов и API, одинаковым как для TypeScript, так и для JavaScript.

Порталы

Порталы — это концепция из React. Портал делает то, что написано на банке: он отвечает за отображение чего-то в месте, отличном от того, где оно объявлено. В случае Vue 3 портал позволяет отображать компонент или часть компонента в другом месте дерева DOM.

Порталы удобны для всего: модальных окон, уведомлений, всплывающих окон и так далее. Вы хотите, чтобы все эти элементы отображались выше всего остального, за пределами основных элементов, составляющих тело страницы. С порталами вам не нужен беспорядочный CSS, бессмысленная z-индексация или элементы, появляющиеся в других случайных местах на странице.

Порталы доступны во Vue 2 через сторонние плагины — например, portal-vue.

Чтобы использовать портал в своем приложении, вам понадобится тег с идентификатором. Примером может быть <div> с идентификатором модального окна непосредственно перед концом вашего тела HTML.

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <div id="modal"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

Далее, всякий раз, когда вы хотите телепортировать компонент или часть компонента в «модальный режим», вы используете синтаксис портала.

<template>
  <Portal target="#modal">
    <div>I'm rendered in the modal, honest, I will be!</div>
  <Portal>
</template>

Фрагменты

Еще одна концепция, пришедшая из React, — это фрагменты — в некоторых кругах ее также называют «несколько корневых узлов». В Vue 2 вам разрешен только один корневой элемент в компоненте. Фрагменты решают эту проблему и позволяют вам использовать более одного корневого узла в компоненте.

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

<Fragment>
  <ComponentOne />
  <ComponentTwo />
  <ComponentThree />
</Fragment>

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

Приведенный выше пример плагина взят из vue-fragment, созданного Julien Barbay, членом сообщества Vue. Текущее обсуждение предполагает, что Vue 3 интегрирует этот плагин в кодовую базу.

саспенс

Приостановка — это специальный компонент, который отображает резервный контент вместо вашего компонента до тех пор, пока не будет выполнено условие.

Возможно, вы помните все те случаи, когда вы писали компоненты и автоматически добавляли v-if="!isLoading" в корневой элемент и v-else во второй элемент для рендеринга во время загрузки контента, например, API или другой асинхронный вызов.

Для этого и существует саспенс. Шаблон ниже показывает пример синтаксиса, и он намного лучше, чем версия v-if.

<Suspense>
  <template #default>
    <MyData />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>

Как он определяет, что ваш компонент должен быть загружен (а не загружен)? Это связано с Composition API и описанным ранее методом настройки. Если вы сделаете метод установки асинхронным, приостановка вступит во владение, и, как только вы вернетесь из установки, отобразится запасной вариант.

Что-то вроде фрагмента ниже вызовет откат, пока вы не завершите вызов getMyData.

export default {
  async setup () {
    const data = await getMyData()
    return { data }    
  }
}

Эта функция значительно — и изящно — сокращает шаблонный код, необходимый для выполнения внешних вызовов.

Глобальное изменение API монтирования/конфигурации

Монтирование вашего приложения Vue немного изменится и улучшит возможности того, что можно сделать: переход от одного глобального экземпляра к объявлению экземпляра и его монтированию.

Ниже приведены фрагменты текущего и нового синтаксиса, взятые из RFC в репозитории vuejs.

ТЕКУЩИЙ:

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')

НОВЫЙ:

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')

Дает ли это возможность использовать несколько приложений? Может быть. Но ясно, что это не единственный экземпляр, и вы можете сделать гораздо больше с новым подходом.

Несколько v-моделей

Если вы знакомы с Vue, вы, скорее всего, знаете, что такое v-модель. Это директива для достижения двусторонней привязки к компоненту. Вы используете это, чтобы передать реактивное свойство и изменить его изнутри. Чего вы, возможно, не знаете, так это того, что v-model — это просто ярлык для передачи значения и прослушивания входного события.

Так что же означает «несколько v-моделей»? Вероятно, у вас была ситуация, когда вы хотели связать и прослушивать несколько свойств в своих компонентах. Например, вы можете создать компонент «Имя», содержащий два значения: «Имя» и «Фамилия». Вы хотите иметь v-модель для каждого из этих значений — и здесь начинают действовать несколько v-моделей.

<NameComponent
  v-model:fornames="forname"
  v-model:surname="surname"
/>

Этот новый синтаксис кажется простым, не так ли? Это так, и теперь вы можете, по сути, назвать свои v-модели.

Пользовательский API директив

Из использования Vue вы должны знать, что такое директива. Одна из основных встроенных директив — это та, которую мы показали, когда говорили о v-model. Есть и другие, включая v-show.

Вы можете создавать собственные директивы в Vue 2. Однако в Vue 3 они меняются. Вопрос в том, почему? Что ж, в текущей форме Directive API имеет собственный набор методов жизненного цикла, которые не соответствуют обычному жизненному циклу Vue. Привязать, вставить, обновить, componentUpdated и отменить привязку.

В Vue 3 эти методы синхронизированы со стандартным жизненным циклом Vue, так что теперь вы получаете beforeMount, смонтированный, beforeUpdate, обновленный, beforeUnmount и размонтированный. Гораздо легче запомнить при создании приложения. Больше не придется копаться, пытаясь найти нужный метод и вспоминая два разных жизненных цикла.

Будущее Vue Framework

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

Следует помнить, что Vue 3 обратно совместим (с некоторыми незначительными изменениями кода). Он не отменяет существующий способ ведения дел; вместо этого он добавляет новые способы.

Если вы уже используете Vue 3, почему бы не попробовать Wijmo — библиотеку компонентов пользовательского интерфейса, доступную в версии Vue.

Попробуйте элементы управления Vue UI от Wijmo