Анонс Vue 3.4

Сегодня мы рады объявить о выпуске Vue 3.4 «🏀 Slam Dunk»!

Этот выпуск включает в себя некоторые существенные внутренние улучшения — в первую очередь переписанный анализатор шаблонов (parser), который работает в 2 раза быстрее, а также переработанную систему реактивности, которая делает срабатывание эффектов более точным и эффективным. Релиз также содержит ряд улучшений API, в том числе стабилизацию defineModel и новое одноименное сокращение при привязке props.

В этом посте представлен обзор некоторых новых функций версии 3.4. Полный список изменений можно найти в полном журнале изменений на GitHub.

---

Потенциальные необходимые действия для обновления

1. Чтобы в полной мере использовать новые функции версии 3.4, рекомендуется также обновить следующие зависимости при обновлении до версии 3.4:
   • Volar / vue-tsc@^1.8.27 (required)
   • @vitejs/plugin-vue@^5.0.0 (если используются Vite)
   • nuxt@^3.9.0 (если используются Nuxt)
   • vue-loader@^17.4.0 (если используются webpack или vue-cli)
2. если используются TSX с Vue, проверьте необходимость в Removed: Global JSX Namespace.
3. Убедитесь, что вы больше не используете устаревшие функции (если да, то в консоли должны появиться предупреждения об этом). Возможно, они были удалены в версии 3.4.

Основные изменения

В 2 раза более быстрый анализатор и улучшенная производительность сборки SFC​

• Context: PR#9674

В версии 3.4 мы полностью переписали парсер шаблонов. Раньше Vue использовал парсер рекурсивного спуска, который опирался на множество регулярных выражений и упреждающий поиск. Новый синтаксический анализатор использует токенизатор конечного автомата, основанный на токенизаторе в htmlparser2, который выполняет итерацию по всей строке шаблона только один раз. В результате анализатор работает вдвое быстрее для шаблонов всех размеров. Благодаря нашим обширным тестам и ecosystem-ci, он также на 100% обратно совместим для Vue и пользователей.

Интегрируя новый парсер с другими частями системы, мы также обнаружили несколько возможностей для дальнейшего улучшения общей производительности компиляции SFC. Тесты показывают улучшение примерно на 44 % при компиляции частей сценария и шаблона Vue SFC при создании исходных карт (source maps), поэтому версия 3.4 должна привести к более быстрой сборке для большинства проектов, использующих Vue SFC. Однако обратите внимание, что компиляция Vue SFC — это только одна часть всего процесса сборки в реальных проектах. Окончательный выигрыш во времени полной сборки (end-to-end build), вероятно, будет намного меньшим по сравнению с изолированными тестами.

Помимо ядра Vue, новый парсер также улучшит производительность Volar/vue-tsc и плагинов сообщества, которым необходимо анализировать SFC или шаблоны Vue, например Vue Macros.

Более эффективная система реактивности​

Context: PR#5912

В версии 3.4 также проделан существенный рефакторинг системы реактивности с целью повышения эффективности повторных вычислений вычисляемых свойств (computed).

Чтобы проиллюстрировать, улучшение, давайте рассмотрим следующий сценарий:

const count = ref(0)
const isEven = computed(() => count.value % 2 === 0)

watchEffect(() => console.log(isEven.value)) // logs true

count.value = 2 // logs true again

До версии 3.4 обратный вызов (callback) watchEffect запускался каждый раз при изменении count.value, даже если вычисленный результат остается прежним. Благодаря оптимизации после версии 3.4 обратный вызов теперь срабатывает только в том случае, если вычисленный результат действительно изменился.

Дополнительно, в 3.4:

• Множественные вычисленные изменения глубины вызывают эффекты синхронизации только один раз.
• Методы shift, unshift, splice запускаются для синхронизации только один раз.

В дополнение к скорости, показанным в тестах, это должно сократить ненужные повторные рендеринги компонентов во многих сценариях, сохранив при этом полную обратную совместимость.

defineModel теперь стабильна​

Context: RFC#503

defineModel — это новый макрос <script setup> целью которого является упрощение реализации компонентов, поддерживающих v-модель. Он был выпущен в версии 3.3 в качестве экспериментальной функции, а в версии 3.4 стал стабильным. Теперь он также обеспечивает лучшую поддержку использования модификаторов v-модели.

Соответствующая документация:

• Revised Component v-model section
• defineModel API reference

v-bind Сокращение атрибутов с тем же именем​

Context: PR#9451

Теперь вы можете сократить это:

<img :id="id" :src="src" :alt="alt">

К этому:

<img :id :src :alt>

Эта функция часто запрашивалась в прошлом. Первоначально у нас были опасения, что его использование можно спутать с логическими (boolean) атрибутами. Однако, пересмотрев эту функцию, мы теперь считаем, что имеет смысл, чтобы v-bind вел себя скорее как JavaScript, чем как собственные атрибуты, учитывая его динамическую природу.

Улучшены ошибки несоответствия гидратации (Hydration Mismatch Errors)​

Context: PR#5953

В версии 3.4 внесен ряд улучшений в сообщениях об ошибках несоответствия гидратации:

1. Улучшена ясность формулировок (rendered by server vs. expected on client).
2. Сообщение теперь включает рассматриваемый узел DOM, поэтому вы можете быстро найти его на странице или на панели элементов.
3. Проверки несоответствия гидратации теперь также применяются к классу, стилю и другим динамически привязанным атрибутам.

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

Код ошибки и ссылка на флаги времени компиляции​

Чтобы уменьшить размер пакета, Vue удаляет длинные строки сообщений об ошибках в производственных сборках. Однако это означает, что ошибки, обнаруженные обработчиками ошибок в рабочей среде, будут получать короткие коды ошибок, которые трудно расшифровать, не углубляясь в исходный код Vue.

Чтобы улучшить эту ситуацию, мы добавили в документацию (Production Error Reference Page) страницу со ссылкой на производственные ошибки. Коды ошибок автоматически генерируются из последней версии стабильной версии Vue.

Мы также добавили Справочник по флагам времени компиляции (Compile-Time Flags Reference) с инструкциями по настройке этих флагов для различных инструментов сборки.ls.

Удалены устаревшие функции

Global JSX Namespace​

Начиная с версии 3.4, Vue больше не регистрирует глобальное пространство имен JSX по умолчанию. Это необходимо, чтобы избежать конфликта глобального пространства имен с React, чтобы TSX обеих библиотек могли сосуществовать в одном проекте. Это не должно повлиять на пользователей, использующих только SFC, с последней версией Volar.

Если вы используете TSX, есть два варианта:

1. Явно установите для jsxImportSource значение 'vue' в tsconfig.json перед обновлением до версии 3.4. Вы также можете подписаться на рассылку для каждого файла, добавив комментарий /* @jsxImportSource vue */ в верхней части файла.
2. Если у вас есть код, который зависит от наличия глобального пространства имен JSX, например. используя такие типы, как JSX.Element и т. д., вы можете сохранить точное глобальное поведение до версии 3.4, явно ссылаясь на vue/jsx, который регистрирует глобальное пространство имен JSX.

Другие удаленные функции​

• Преобразование реактивности (Reactivity Transform) было помечено как устаревшее в версии 3.3 и теперь удалено в версии 3.4. Это изменение не требует серьезного вмешательства, поскольку эта функция является экспериментальной. Пользователи, желающие продолжить использование этой функции, могут сделать это через плагин Vue Macros.
• app.config.unwrapInjectedRef удален. Он устарел и включен по умолчанию в версии 3.3. В версии 3.4 отключить это поведение уже невозможно.
• Прослушиватели событий (event listeners) @vnodeXXX в шаблонах теперь выдают ошибку компилятора, а не предупреждение об устаревании. Вместо этого используйте прослушиватели @vue:XXX.
• Директива v-is удалена. Он устарел в версии 3.3. Вместо этого используйте атрибут is с префиксом vue (is attribute with vue: prefix).