На недавнем двухдневном мероприятии 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 .
Заинтересованы в масштабировании запуска вашего программного обеспечения? Ознакомьтесь с разделом Схема.