Что нового в обновлении Vue 3.4

В начале января 2024 года вышло обновление Vue 3.4. Англоязычный блог LearnVue рассказал, что изменилось в новой версии Vue.

Вот, о чём идёт речь в видео:

1. Вышла новая версия Vue 3.4, которая вносит изменения, улучшающие производительность и разработку.
2. Внутреннее улучшение заключается в полной переписи парсера шаблонов, что ускоряет компиляцию компонентов.
3. Новый парсер использует токенизатор на основе машины состояний вместо регулярных выражений, что повышает производительность.
4. Изменения в системе реактивности Vue: теперь эффекты, зависящие от вычисляемых значений, запускаются только при их изменении.
5. Улучшения разработчика (DX) включают стабилизацию DefineModel и новую сокращенную запись для vBind.
6. Улучшены сообщения об ошибках и сокращены строки ошибок в продакшене для уменьшения размера бандла.
7. Синтаксис реактивности, который был объявлен устаревшим в Vue 3.3, теперь окончательно удален, но его можно использовать с помощью библиотеки Vue macros.

Ниже — транскрибированный перевод ролика на русский язык.

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

Обновление парсера шаблонов в Vue 3.4

Первое внутреннее улучшение – полная переработка парсера шаблонов. Он используется для компиляции наших однофайловых компонентов.

Я даже не буду притворяться, что точно понимаю, что происходит под капотом, но по моим скромным знаниям, полученным из прочтения блога Эвана Ю, нескольких часов просмотра уроков на YouTube и нескольких попыток прочесть исходный код, старый парсер сильно полагался на просмотры строк и регулярные выражения, в то время как новый парсер использует токенизатор конечного автомата на основе HTML парсера 2.

Это означает, что ему нужно пройти по строке только один раз, что дает нам приятный прирост производительности.

Что это значит для нас – компиляции и сборки, скорее всего, увидят улучшение производительности, а другие части экосистемы Vue, такие как Volar или Vue TSC, будут работать быстрее.

Реактивный Vue

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

Давайте посмотрим на это в коде. Допустим, у нас есть ref под названием name, вычисляемое свойство, которое проверяет, является ли имя моим и затем watch эффект, который выводит в консоль в зависимости от того, я это я или нет.

До версии 3.4, каждый раз, когда мы меняем имя, is me будет отмечено как что-то вроде “грязного” ввода, который требует пересчета, но фактически пересчитываться оно не будет, пока у нас не будет чего-то, что считывает это значение, в нашем случае, наш watch эффект.

Так что мы не узнаем, меняется ли is me, пока этот watch эффект не запустится. Но теперь способ, которым вычисляемые значения запускают эффекты, все подписанные эффекты будут запускаться только в том случае, если значение вычисляемого изменится.

Это более точная и эффективная реализация системы пользовательской активности. Если вы видели мое видео о “eager computed values”, результат довольно похож. И даже в документации по использованию вычисляемого свойства в Vue для “eager composable” говорится, что нам больше не нужно это в Vue 3.4. И затем другая половина изменений – это некоторые хорошие улучшения DX, начиная с некоторых изменений в Define Model.

Define Model

Возвращаясь к Define Model, если вы использовали его в Vue 3.3, когда он был экспериментальным, то теперь он стабилен. Если вы не знаете, что это такое, Define Model – это приятный синтаксический сахар, который позволяет нам быстро создавать значения, используемые в двусторонней привязке данных с помощью vModel. Раньше, если вы хотели иметь ref, который моделирует какой-то ввод в дочернем компоненте, этот компонент должен был принимать prop и затем генерировать событие, когда этот ввод меняется.

С Define Model Vue заботится об этом за нас, поэтому нам просто нужно использовать Define Model и все готово.

Новый сокращенный синтаксис vBind

Следующее изменение – новый сокращенный синтаксис vBind. При передаче переменной в качестве prop, иногда имя нашего prop совпадает с нашей переменной. Vue 3.4 дает нам новый сокращенный вариант для этого. Так что вместо того, чтобы говорить “colon title equals title” для привязки переменной с именем title, мы можем просто использовать “colon title” для сокращения.

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

Но если вам нравится этот синтаксис, вы все еще можете использовать его с библиотекой Vue macros.