[Перевод] Вышел Vue 3.504.09.2024 13:16

Эта статья — перевод оригинальной статьи «Announcing Vue 3.5».

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

Вступление

Сегодня мы рады сообщить о выходе Vue 3.5 «Tengen Toppa Gurren Lagann»!

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

Оптимизация системы реактивности

В версии 3.5 система реактивности Vue подверглась очередному масштабному рефакторингу, который позволил добиться более высокой производительности и значительно улучшить использование памяти (-56%) без каких-либо изменений в поведении. Рефакторинг также решает проблемы с устаревшими computed и памятью, вызванные зависанием computed во время SSR.

Кроме того, в 3.5 оптимизировано отслеживание реактивности для больших, глубоко реактивных массивов, что в некоторых случаях ускоряет такие операции до 10 раз.

Подробности: PR#10397, PR#9511

Реактивная деструктуризация props

Реактиваная деструктуризация props была стабилизирована в 3.5. Теперь эта функция включена по умолчанию, и переменные, деструктурированные в результате вызова defineProps в 

Подробнее: PR#11404

data-allow-mismatch

В случаях, когда клиентское значение неизбежно отличается от своего серверного аналога (например, даты), мы теперь можем подавлять возникающие предупреждения о несоответствии гидратация с помощью атрибутов data-allow-mismatch: 

{{ data.toLocaleString() }}

Вы также можете ограничить допустимые типы несоответствий, указав значение атрибута, где возможными значениями являются text,  children,  class,  style иattribute .

Улучшения пользовательских элементов

В версии 3.5 исправлено множество давних проблем, связанных с API defineCustomElement(), и добавлен ряд новых возможностей для создания пользовательских элементов с помощью Vue:

  • Поддержка конфигураций приложений для пользовательских элементов с помощью опции configureApp.

  • Добавьте useHost(), useShadowRoot() и this.$host для доступа к элементу host и shadow root пользовательского элемента.

  • Поддержка установки пользовательских элементов без Shadow DOM путем передачи shadowRoot: false.

  • Поддержка предоставления опции nonce, которая будет прикрепляться к тегам