Что нового в Vue 3.3–3.5+ (Vapor Mode)

↑ 7.1 Vue под капотом · ← Предыдущая

Желательно~3 мин чтенияУровень: senior

Зачем это на собесе

Показывает, что вы следите за экосистемой. Достаточно назвать ключевые фичи и мотивацию.

3.3

• дженерик-компоненты: <script setup lang="ts" generic="T extends string | number">;
• defineSlots, defineOptions;
• импорт типов в defineProps из внешних файлов;
• toRef(() => props.x) и toValue() для нормализации ref, getter и значения.

3.4

• переписанный парсер шаблонов (2× быстрее);
• v-bind с одинаковым именем: :id вместо :id="id";
• defineModel (стабилен) для v-model без ручных props и emit.

<script setup lang="ts">
const model = defineModel<string>({ required: true })
</script>
<template><input v-model="model" /></template>

3.5

• Reactive Props Destructure: const { title = 'x' } = defineProps<...>() остаётся реактивным;
• useTemplateRef() для получения ссылок на элементы;
• useId() — стабильные id для SSR и a11y;
• onWatcherCleanup, watch с pause/resume;
• <Teleport defer>, ленивая гидрация (hydrateOnVisible, hydrateOnIdle);
• оптимизация реактивности: меньше памяти, быстрее для больших массивов.

Vapor Mode

Экспериментальный режим компиляции без virtual DOM: шаблон превращается в прямые операции с DOM и реактивные подписки. Идея — производительность как у Solid и меньший размер рантайма. Совместим по API с <script setup>; включается на уровне компонента (<script setup vapor>).

Вопросы с ответами

Что такое defineModel?

Макрос для двустороннего binding: возвращает ref, синхронизированный с modelValue и событием update:modelValue. Убирает ручное объявление props и emit.

Зачем Vapor Mode?

Убрать накладные расходы virtual DOM: меньше памяти и быстрее обновления, при том же синтаксисе шаблонов.