На недавнем двухдневном мероприятии VueJS Amsterdam 2023, проходившем с 8 по 10 февраля, Эван Ю рассказал о некоторых новых интересных функциях Vue и представил обновления дорожной карты на 2023 год.

TLDR/Основные моменты:

📍 Vue 2 достигает завершения поддержки (EOL) 31 декабря 2023 г.

📍 API параметров никуда не денется

📍 Преобразование реактивности будет удалено из ядра Vue в версии 3.4.

📍 Деструктуризация реактивного реквизита

📍 Приостановка будет завершена во втором квартале.

📍 Больше улучшений SSR, включая ленивую гидратацию, только v-ssr.

📍 Режим Vapor – режим компиляции, ориентированный на производительность, по выбору.

🚦Что будет с Vue 2

Чтобы устранить технический разрыв между основными версиями, Vue 2.7 поставляется со встроенной поддержкой API композиции, а также функцией <script setup>. Это также должно уменьшить некоторые усилия по обновлению до Vue 3.

Последняя версия Vue 2.7 — это последняя версия 2.x. Это означает, что для Vue 2 больше не будет запланировано выпусков новых функций. Тем не менее, он по-прежнему будет получать необходимую поддержку для исправления ошибок и исправлений безопасности до конца этого года.

После 31 декабря 2023 года Vue 2 больше не будет поддерживаться основной командой VueJS. Есть несколько вариантов, подробно описанных в официальном документе по этому поводу, которые включают в себя то, что можно сделать, если вы не планируете переходить на Vue 3. Один из вариантов — заглянуть в HeroDevs, так как они будут поддерживать Вью 2.

🪦 Преобразование реактивности RIP

При использовании ref, чтобы сделать что-то реактивным, мы можем присвоить ему новое значение и отслеживать его через .value:

const count = ref(0)
console.log(count.value) // 0

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

Основная команда Vue решила постепенно отказаться от этого в ближайшие месяцы. Одна из причин заключается в том, что улучшение DX довольно ограничено. Без .value теперь теряется различие между реактивными и нереактивными переменными, и это неизбежно приводит к еще одной умственной нагрузке.

Если вы используете Reactivity Transfom в существующей кодовой базе, вы получите предупреждение об устаревании, начиная с версии 3.3. К версии 3.4 он будет полностью удален из основного пакета Vue. Однако вы все равно можете использовать его из Макросов Vue.

🙌 Деструктуризация реактивного реквизита

Несмотря на то, что Reactive Transform не проходит RFC, из него вышло кое-что полезное, а именно деструктуризация реактивных пропсов.

На данный момент, когда мы деструктурируем пропсы вот так с defineProps, реактивность теряется:

const { count } = defineProps<{ count: number }>(); // count loses reactivity

Следовательно, нам либо нужно использовать props.x, либо не забыть использовать toRefs:

const props = defineProps<{ count: number }>(); 
const { count } = toRefs(props); // count remains reactive here

С деструктурированием реактивных реквизитов мы можем забыть обо всем этом и просто деструктурировать его обычным способом JS, и мы даже можем назначить значение по умолчанию, например:

const { count = 1 } = defineProps<{ count: number }>(); // count stays reactive

В настоящее время деструктуризация реактивных реквизитов является частью Reactivity Transform RFC, но, как упомянул Эван на конференции, мы можем ожидать, что это будет выделено в отдельную функцию, и, вероятно, она будет включена в качестве новой функции в будущих выпусках Vue.

☁️ Улучшения SSR

В сотрудничестве с командой Nuxt команда Vue сосредоточится на некоторых улучшениях SSR во втором квартале. Это включает в себя доработку функции Приостановка, которая в настоящее время все еще находится в экспериментальном режиме.

Проще говоря, Suspense — это встроенный компонент, который предлагает решение для отображения состояния загрузки/ошибки верхнего уровня в ожидании разрешения вложенных асинхронных компонентов. Без этого мы должны обрабатывать состояния каждого из этих асинхронных компонентов отдельно.

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

v-ssr-only — еще одна новая функция, которую изучает команда Vue. Это позволит нам объявить конкретный шаблон только для рендеринга на стороне сервера. Это может быть полезно, когда у нас есть динамическая привязка к шаблону, где часть данных извлекается из базы данных, но она никогда не изменится на стороне клиента. В этом случае, когда сборка клиента завершена, компиляцию можно выполнить по-другому, игнорируя все динамические привязки, чтобы не выполнять никакой работы во время гидратации.

⚡️Паровой режим

До этого было немного информации об этой, казалось бы, захватывающей новой способности, которую изучает команда Vue. В начале этого года Эван Ю кратко представил его в своем блоге Новый 2023 год.

Вдохновленный SolidJS, Vapor Mode предлагает альтернативную стратегию компиляции. Он компилирует Vue SFC в выходные данные JavaScript, которые более производительны, используют меньше памяти и требуют меньше кода поддержки во время выполнения по сравнению с текущим выводом на основе Virtual DOM.

Звучит довольно удивительно. Что еще круче, так это то, что все это можно сделать без особых изменений в существующей кодовой базе.

Во время разговора на Vue Amsterdam мы увидели некоторые новые подробности о том, как мы можем подписаться на Vapor Mode. Есть 2 способа сделать это:

i) На уровне компонентов, включая постфикс имени файла .vapor, например Counter.vapor.vue :

<script setup>
import Counter from './Counter.vapor.vue' 
</script>

<template>
  <Counter>
</template>

ii) На уровне приложения, отключив взаимодействие VDOM:

import { createApp } from 'vue/vapor'
import App from './App.vapor.vue'

createApp(App).mount('#app')

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

В начале предполагается, что режим Vapor поддерживает только подмножество Vue API (<script setup> и Composition API) для лучшей производительности. Следовательно, планируется сделать компонент Vapor полностью совместимым с любыми другими существующими компонентами, не относящимися к Vapor. Достижение свободного смешанного использования (использование компонентов Vapor в компоненте, отличном от Vapor, и наоборот) также является конечной целью команды Vue. Скорее всего, мы увидим это где-то в третьем — четвертом квартале.

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

Если вы узнаете что-то новое, хлопайте 👏 ниже, чтобы больше людей тоже могли это увидеть!

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord .

Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.