Эта статья — перевод оригинальной статьи 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> у нас также есть новый 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. А именно:
Компилятор шаблонов также получил ряд улучшений:
Наконец, есть новая директива 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 смотрите в списке всех изменений.
