Вчера мы только что отметили 5-ю годовщину Vueniversary - сегодня мы рады объявить о выпуске Vue 2.6 Macross!

В прошлом году мы потратили много времени на работу над новым интерфейсом командной строки и прототипированием для 3.0. В результате Vue core 2.x уже довольно давно не получает серьезных обновлений. Пора! Этот выпуск сочетает в себе ряд существенных улучшений, внутренних изменений и новых функций, о которых говорится в этом посте. Для получения полной информации обязательно ознакомьтесь с полной примечанием к выпуску на GitHub.

Слоты: новый синтаксис, улучшения производительности и соответствие версии 3.0

Слоты - важный механизм, обеспечивающий гибкую композицию компонентов во Vue. Во время создания прототипа для 3.0 мы обнаружили несколько способов его улучшения. Некоторые из них могут быть введены без критических изменений, что позволяет нам выпускать их во второстепенном выпуске 2.x. Для тех, кто действительно требует критических изменений, мы также пытаемся предоставить прогрессивные альтернативы в 2.x, которые упростят будущие миграции.

Новый синтаксис

Первый шаг - это новый синтаксис слотов с ограниченной областью действия. Мы предложили, обсудили и экспериментировали с рядом различных дизайнов (1, 2, 3) и в конечном итоге остановились на новом синтаксисе v-slot, описанном в этом RFC. Вот краткий пример использования именованных слотов:

Новый синтаксис унифицирует использование обычных и ограниченных слотов в одной директиве и обеспечивает более явное и удобочитаемое использование именованных слотов. Он также полностью совместим с существующим синтаксисом, что позволяет нам отправить его сегодня в версии 2.6.

Если вы уже знакомы с существующим синтаксисом слотов, мы рекомендуем вам прочитать RFC, чтобы лучше понять смысл нового синтаксиса. Если вы еще не знакомы со слотами, рекомендуется вместо этого просмотреть обновленную документацию по слотам.

Улучшения производительности

Еще одно улучшение для слотов, которое мы хотели бы видеть в версии 3.0, - это унификация слотов с нормальной и ограниченной областью видимости с точки зрения реализации из-за преимущества в производительности слотов с ограниченной областью действия. Обычные слоты отображаются во время цикла рендеринга родителя. Когда зависимость слота изменяется, это вызывает повторную визуализацию как родительского, так и дочернего компонентов. Слоты с заданной областью, с другой стороны, компилируются во встроенные функции и вызываются во время цикла рендеринга дочернего компонента. Это означает, что любые зависимости данных, на которые опирается слот с заданной областью, собираются дочерним компонентом, что приводит к более точным обновлениям. В версии 2.6 мы ввели оптимизацию, которая дополнительно гарантирует, что мутации зависимостей родительской области видимости затрагивают только родительский компонент и больше не будут заставлять дочерний компонент обновляться, если он использует только слоты с ограниченной областью видимости.

Кроме того:

  • Все слоты, использующие новый синтаксис v-slot, компилируются в слоты с заданной областью. Это означает, что все слоты, использующие новый синтаксис, автоматически улучшают производительность;
  • Все обычные слоты теперь также доступны на this.$scopedSlots как функции. Это означает, что пользователи, использующие функции рендеринга вместо шаблонов, теперь всегда могут использовать this.$scopedSlots, не беспокоясь о том, какой тип слотов передается.

В версии 3.0 больше не будет различия между слотами с ограниченным диапазоном и слотами без него - все слоты будут использовать один и тот же унифицированный синтаксис, скомпилированы в один и тот же формат и будут иметь одинаковую оптимальную производительность.

Асинхронная обработка ошибок

Встроенный механизм обработки ошибок Vue (внутрикомпонентная ловушка errorCaptured и глобальная ловушка errorHandler) теперь также фиксирует ошибки внутри v-on обработчиков. Кроме того, если какой-либо из ваших хуков жизненного цикла или обработчиков событий выполняет асинхронные операции, теперь вы можете вернуть Promise из функции, чтобы любые неперехваченные ошибки из этой цепочки Promise также отправлялись вашим обработчикам ошибок. Это становится еще проще, если вы используете async / await, поскольку асинхронные функции неявно возвращают Promises:

Аргументы динамической директивы

Аргументы директивы теперь могут принимать динамические выражения JavaScript:

Более подробную информацию можно найти в этом RFC. Удобно, если значение аргумента null, привязка / прослушиватель будет удалена.

Примечание для авторов библиотеки: эта функция требует, чтобы среда выполнения Vue была версии 2.6.0 или выше. Если вы поставляете предварительно скомпилированные компоненты и хотите поддерживать совместимость с версиями до 2.6, избегайте использования этого в исходном коде.

Кодовый фрейм в предупреждающих сообщениях компилятора

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

Явное создание автономных реактивных объектов

2.6 представляет новый глобальный API для явного создания автономных реактивных объектов:

Результирующий объект можно использовать непосредственно в вычисляемых свойствах или функциях рендеринга, и он будет запускать соответствующие обновления при изменении.

Предварительная выборка данных во время рендеринга на стороне сервера

Новый serverPrefetch хук позволяет любому компоненту (а не только компонентам уровня маршрута) выполнять предварительную выборку данных во время рендеринга на стороне сервера, обеспечивая более гибкое использование и уменьшая связь между извлечением данных и маршрутизатором. Такие проекты, как Nuxt и vue-apollo, уже планируют упростить их реализацию с помощью этой новой функции.

Сборка модуля ES для прямого импорта

Раньше наша сборка ES-модуля в основном предназначалась для использования с сборщиками. Эти сборки содержат использование переменных среды, которые должны быть заменены во время компиляции. Vue 2.6 теперь также предоставляет сборку модуля ES, предназначенную для прямого использования в браузере:

Важные внутренние изменения

Возврат nextTick к Microtask

В 2.5.0 мы внесли внутреннюю корректировку, из-за которой nextTick использовала макротации вместо микрозадач для постановки обновлений в очередь, если обновление было инициировано в обработчике событий v-on. Первоначально это было предназначено для исправления некоторых краевых случаев браузера, но, в свою очередь, привело к ряду других проблем. В версии 2.6 мы нашли более простое исправление исходной проблемы, которое позволяет нам вернуть nextTick для постоянного использования микрозадач во всех случаях.

Если вас интересуют более подробные технические подробности, загляните здесь.

Функции на this.$scopedSlots теперь всегда возвращают массивы

(Это изменение влияет только на пользователей функций рендеринга.) В функциях рендеринга слоты с заданной областью видны на this.$scopedSlots как функции. До сих пор вызов функции слота с заданной областью действия мог возвращать один VNode или массив VNodes в зависимости от того, что передает родительский компонент. Это, честно говоря, было упущением, поскольку оно делает тип возвращаемого значения недетерминированным и может приводить к непредвиденным крайним случаям. В версии 2.6 функции слотов с ограниченной областью видимости теперь гарантированно возвращают либо массив виртуальных узлов, либо undefined. Это может повлиять на некоторый существующий код, если он неправильно проверяет возможные возвращаемые значения Array. Подробнее здесь.

Крики

Спасибо участникам, которые внесли запросы на включение в этот выпуск, и всем членам сообщества, участвовавшим в обсуждениях RFC.