Вышла Vue 3.2

Kate · 10 Авг 2021

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

Вступление

Мы рады объявить о выпуске 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> у нас также есть новый 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. А именно:

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

На ~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 смотрите в списке всех изменений.