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

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

Вот что нового в Vue 3

Новый способ создавать и монтировать свои приложения

Vue 3 меняет способ работы глобальных API. Это означает, что глобальные API-интерфейсы, влияющие на поведение Vue, теперь перемещаются в экземпляры приложений с помощью нового метода createApp (). Глобальные API, не влияющие на Vue, называются экспортом.

// ====== BEFORE ======
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
Vue.use(/*...*/)

new Vue({
    render: h => h(App),
}).$mount('#app')
// ====== AFTER ======
import { createApp } from 'vue' 
import App from './App.vue'
const app = createApp()
app.use(/*...*/)
app.mount('#app')

Composition API

Composition API - это новая функция, которая полностью возьмет на себя компоненты Vue 2. Это способ более эффективно писать и понимать компоненты.

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

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

Саспенс

Приостановка позволяет установить шаблон по умолчанию и резервный шаблон.

<template>
  <div>
    <Suspense>
      <template #default>
        // Code goes here
        <Articles />
      </template>
      <template #fallback>
        // This executes if #default doesn't load
        <Loading />
      </template>
    </Suspense>
  </div> 
</template>

Поэтому вместо использования v-if, чтобы узнать, загружены ли данные или нет, Suspense сделает все это за вас.

Порталы

В Vue 3 порталы позволят вам нацелиться на рендеринг целых деревьев DOM. Это делается с помощью ‹Portal /›.

<Portal target="#target-location">
  <p>Hello</p>
</Portal>
// Gets rendered in
<div id="target-location"></div>

Эти порталы значительно упростят работу с большим деревом компонентов.

Спасибо за прочтение
Будьте в безопасности
Херби