Що нового у Vue 3

5 хв. читання

Коли цей матеріал готувався, Vue 3.0 був на стадії десятої альфа-версії, а 19 квітня вийшла бета Vue v3.0. Очікується, що фреймворк буде швидшим, використовуватиме менше пам'яті, стане простішим і більш підтримуваним.

Ви досі можете під'єднувати Vue до проєкту через тег script, а старіші версії Vue 2.x підтримуватимуться й надалі. З альфа-версією Vue 3.0 можна погратись за посиланням, а от в матеріалі ми поговоримо про нові фічі, які пропонує фреймворк.

Серед них — поява нового API для створення компонентів. Він не вводить нових концепцій до фреймворку, а скоріше відкриває перед Vue такі ключові можливості, як створення реактивного стану у вигляді окремих функцій. Надзвичайно корисний підхід для Vue-розробника будь-якого рівня.

Options API та Composition API

У Vue 2 компоненти створюються за допомогою Options API, який базується на об'єктах. Vue 3 пропонує набір API, так званий Composition API, який використовує функціональний підхід. Його поява спричинена проблемами Vue 2, що виникають на великих проєктах.

У великих компонентах, які інкапсулюють декілька логічних завдань, хочеться згрупувати код за фічею. Однак особливості розбиття коду з Options API (між хуками життєвого циклу) негативно впливають на читабельність. Для великих проєктів також важливе повторне використання логіки, а рішення, яке пропонує Vue 2 (міксіни), не дуже з цим справляється.

Vue 3 з новим API усуває одразу дві проблеми. Однак ці нововведення не мають замінити Options API — швидше, вони співіснуватимуть з ним. Тобто ви можете і далі створювати компоненти, як ви звикли. Але якщо ви застосуєте Composition API, то відчуєте, що організація коду та його повторне використання стали кращими.

Навіть якщо вас не стосуються проблеми, на котрі спрямований новий API, він однозначно відіграє велику роль у розвитку Vue як фреймворку. Тепер стане менше «магічних дій», які Vue робить нібито за лаштунками.

Composition API

Composition API доступний як плагін для Vue 2, тому його вже можна спробувати. У третій версії він буде одразу вбудований.

Реактивність у Vue 2 підтримувалась за допомогою гетерів та сетерів Object.defineProperty. Такий підхід має певні обмеження, на які ви, певно, вже натрапляли (наприклад, оновлення масиву за індексом). У Vue 3 реактивність досягається через proxy, об'єкт, який був запропонований у JavaScript ES6.

Вам не треба мати екземпляр Vue, аби використовувати нове реактивне API. Його можна застосувати самостійно, аби створювати, спостерігати та реагувати на зміни стану.

Щоб почати роботу з API, необхідно його імпортувати: import { reactive } from 'vue'. Далі створюємо об'єкт:

const state = reactive({ count: 0 })

Так ми отримали доступ до API, які дозволять динамічно додати хуки життєвого циклу компонента до екземпляра Vue.

Методи реєстрації життєвого циклу можна використовувати лише у методі setup(). Це своєрідна точка входу для функцій Composition API. Наприклад:

import { onMounted } from 'vue'

export default {
  setup() {
    onMounted(() => {
      console.log('component is mounted.')
    })
  }
}

Функції, які використовують новий API, можна імпортувати в інший компонент. Тобто декілька подібних завдань можна виконувати за допомогою одного блоку читабельного коду.

TypeScript

З Composition API покращується також і підтримка TypeScript. Передбачається, що так інтерфейси стануть краще типізованими: setup() повертатиме всі прив'язки та props з визначеними типами.

Компоненти на JavaScript і TypeScript видаються дуже подібними. Однак типізація TypeScript принесе користь також розробникам на JavaScript, якщо вони використовують, наприклад, Visual Studio Code.

View

Vue 2 підтримує як шаблони, так і функції рендерингу. Цей аспект мало змінився у Vue 3. Він продовжить підтримувати обидва способи, однак оптимізуватиме швидкість рендерингу (пришвидшенням алгоритмів diff, які відбуваються під капотом, аби Vue знав, коли слід повторно рендерити компонент).

Переваги швидкості

Віртуальний DOM було переписано з нуля, аби процес монтування та патчингу став ще швидшим.

Для зменшення додаткового навантаження (під час виконання) підказки з'являються протягом компіляції. Тобто Vue уникає непотрібних рендерів. Статичне дерево та статичне виплиття пропів дозволяє цілим деревам та вузлам уникнути патчу. Вбудовані функції (на зразок обробників компонента у шаблоні) не викликатимуть тепер зайвих рендерів.

З новим Vue ми отримуємо механізм, що використовує proxy для спостереження за змінами, з повною підтримкою мов та покращенням у продуктивності. Нативний Proxy дозволяє працювати швидше, ніж з попереднім Object.defineProperty.

З переліченими змінами очікується, що швидкість ініціалізації екземплярів компонентів збільшиться вдвічі, а використання пам'яті навпаки зменшиться.

Переваги використання пам'яті

Vue 3 став меншим, ніж була попередня версія.

Можемо завдячити механізму tree shaking. Він дозволяє позбутися зайвого коду. Розмір основного стиснутого коду фреймворку зменшився з ~20kb до ~10kb.

Розмір Vue bundle збільшується з кожною новою фічею, однак завдяки глобальним API та допоміжним функціям Vue (у вигляді експортів ES модулів) Vue 3 дозволяє використовувати механізм tree shaking на дедалі більших обсягах коду, навіть у шаблонах.

Сумісність

Бібліотеки на зразок Vue Router та тестові утиліти будуть оновлені разом з Vue 3. Тепер фреймворк підтримуватиме користувацький API рендерера (подібно до React Native для тих, хто хоче з його допомогою створювати рендерери для мобільного чи іншого середовища).

Висновок

Vue 3 робить великий крок вперед з дивовижним фічами на зразок Composition API. На жаль, не всі новинки були охоплені у цій статті (наприклад, портали). Нам залишається дізнаватися більше про нові фічі та очікувати на новий і покращений Vue 3 вже незабаром.

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 869
Приєднався: 1 рік тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід