[Перевод] Вышла Vue 3.2
Эта статья — перевод оригинальной статьи Evan You «Vue 3.2 Released!»
Также я веду телеграм канал «Frontend по-флотски», где рассказываю про интересные вещи из мира разработки интерфейсов.
Вступление
Мы рады объявить о выпуске Vue.js 3.2 «Quintessential Quintuplets»! Этот релиз включает в себя множество значительных новых функций и улучшений производительности и не содержит критических изменений.
Новые фичи SFC
Две новые функции для однофайловых компонентов (SFC, также известные как файлы .vue) вышли из экспериментального статуса и теперь считаются стабильными:
— это синтаксический сахар, который значительно улучшает эргономику при использовании Composition API внутри SFC.
Попробуйте это на SFC Playground или прочтите соответствующую документацию:
Основываясь на
у нас также есть новый RFC для улучшения эргономики использования ref — пожалуйста, поделитесь своим мнением здесь.
Web Components
Vue 3.2 представляет новый метод
defineCustomElement
для простого создания собственных нативных веб компонентов с использованием API Vue компонентов:import { defineCustomElement } from 'vue' const MyVueElement = defineCustomElement({ // поля обычного Vue компонента }) // Зарегистрируйте свой компонент. // После регистрации, все `
` теги // на на странице будут обновлены. 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 смотрите в списке всех изменений.