Вышла Vue 3.2

Эта статья — перевод оригинальной статьи Evan You "Vue 3.2 Released!"

Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.

Вступление

Мы рады объявить о выпуске Vue.js 3.2 "Quintessential Quintuplets"! Этот релиз включает в себя множество значительных новых функций и улучшений производительности и не содержит критических изменений.

Новые фичи SFC

Две новые функции для однофайловых компонентов (SFC, также известные как файлы .vue) вышли из экспериментального статуса и теперь считаются стабильными:

• <script setup> - это синтаксический сахар, который значительно улучшает эргономику при использовании Composition API внутри SFC.

• <style> v-bind включает динамические значения CSS, управляемые через состояния компонентов, в теге <style>.

Вот пример компонента, использующего эти две новые функции вместе:

<script setup>
import { ref } from 'vue'

const color = ref('red')
</script>

<template>
  <button @click="color = color === 'red' ? 'green' : 'red'">
    Color is: {{ color }}
  </button>
</template>

<style scoped>
button {
  color: v-bind(color);
}
</style>

Попробуйте это на SFC Playground или прочтите соответствующую документацию:

• <script setup>

• <style> v-bind

Основываясь на <script setup> у нас также есть новый RFC для улучшения эргономики использования ref - пожалуйста, поделитесь своим мнением здесь.

Web Components

Vue 3.2 представляет новый метод defineCustomElement для простого создания собственных нативных веб компонентов с использованием API Vue компонентов:

import { defineCustomElement } from 'vue'

const MyVueElement = defineCustomElement({
  // поля обычного Vue компонента
})

// Зарегистрируйте свой компонент.
// После регистрации, все `<my-vue-element>` теги
// на на странице будут обновлены.
customElements.define('my-vue-element', MyVueElement)

Этот API позволяет разработчикам создавать библиотеки компонентов на основе Vue, которые можно использовать с любым фреймворком или же вообще без него. Мы также добавили в нашу документацию новый раздел, посвященный использованию и созданию веб-компонентов в Vue.

Улучшения производительности

3.2 включает в себя значительные улучшения производительности реактивности Vue, благодаря отличной работе @basvanmeurs. А именно:

• Более эффективная реализация ref (на ~260% быстрее чтение/~50% быстрее запись)

• На ~40% более быстрое отслеживание зависимостей

• На ~17% меньше использования памяти

Компилятор шаблонов также получил ряд улучшений:

• На ~200% быстрее происходит создание простых элементов VNodes

• Более агрессивное всплытие констант [1] [2]

Наконец, есть новая директива v-memo, которая дает возможность мемоизировать часть дерева шаблона. Директива v-memo позволяет Vue пропустить не только различие виртуального DOM, но и вообще создание новых VNodes. Несмотря на то, что эта директива понадобится вам довольно редко, но она обеспечивает обработку некоторых случаев для достижения максимальной производительности в определенных сценариях, например, в больших списках v-for.

Использование v-memo, которое представляет собой небольшое дополнение, помещает Vue в число самых быстрых фреймворков в js-framework-benchmark:

Server-side Rendering

Пакет @vue/server-renderer в версии 3.2 теперь включает сборку ES модуля, который также отделен от встроенных модулей Node.js. Это позволяет объединять и использовать @vue/server-renderer в средах выполнения, отличных от Node.js, таких как CloudFlare Workers или Service Workers.

Мы также улучшили streaming render APIs, добавив новые методы рендеринга в Web Streams API. Ознакомьтесь с документацией @vue/server-renderer для получения более подробной информации.

Effect Scope API

3.2 представляет новый Effect Scope API для прямого управления временем удаления реактивных эффектов (computed и watchers). Это упрощает использование API реактивности Vue вне контекста компонента, а также открывает некоторые расширенные варианты использования внутри компонентов.

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

Заключение

Подробный список всех изменений в 3.2 смотрите в списке всех изменений.