[Перевод] Вышла Vue 3.211.08.2021 00:16

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

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

Вступление

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

Новые фичи SFC

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

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

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

  Основываясь на <script setup> у нас также есть новый 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 смотрите в списке всех изменений.

  © Habrahabr.ru