Обновление Vue 3.4: более лаконичный v-bind и ещё выше производительность

1. Знакомство с Vue 3.4 «Slam Dunk»

В начале 2024 года команда Vue выпустила версию 3.4 под кодовым названием «Slam Dunk». Это обновление не столь радикально, как версия 3.0, но приносит важные улучшения в двух ключевых областях: внутренней оптимизации производительности и удобстве разработки.

Самые заметные изменения — переработанная система реактивности, стабильный API defineModel и более лаконичный синтаксис v-bind.

2. Переработка системы реактивности

В Vue 3.4 была значительно переработана основная система реактивности. Главная цель этой работы — повысить эффективность вычисляемых свойств computed.

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

Для большинства разработчиков это «бесплатный обед»: изменять код не требуется, а переход на версию 3.4 автоматически даёт прирост производительности.

3. defineModel: элегантная двусторонняя привязка в компонентах

До версии 3.4 для реализации в компоненте двусторонней привязки наподобие v-model приходилось писать довольно много шаблонного кода:

Раньше 👎:

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

// 通常需要一个计算属性来包装
const value = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})
</script>

<template>
  <input v-model="value" />
</template>

В Vue 3.4 API defineModel вышел из экспериментального статуса и стал стабильным. Теперь для того же поведения достаточно одной строки кода:

Теперь (Vue 3.4) 👍:

<script setup>
const model = defineModel()
</script>

<template>
  <input v-model="model" />
</template>

Макрос defineModel автоматически регистрирует prop modelValue и событие update:modelValue, а затем возвращает ref, который можно непосредственно читать и изменять. Это значительно упрощает разработку компонентов с поддержкой v-model.

4. Сокращённая запись v-bind для одноимённых свойств

Ещё одно синтаксическое улучшение для удобства разработки — сокращённая запись v-bind при совпадении имён. Если передаваемый компоненту prop называется так же, как переменная в <script setup>, значение атрибута теперь можно опустить.

Раньше 👎:

<script setup>
const id = 'my-id'
const title = 'Hello Vue'
</script>

<template>
  <MyComponent :id="id" :title="title" />
</template>

Теперь (Vue 3.4) 👍:

<script setup>
const id = 'my-id'
const title = 'Hello Vue'
</script>

<template>
  <MyComponent :id :title />
</template>

Это небольшое изменение делает код шаблонов чище и понятнее.

Заключение

Vue 3.4 — основательное эволюционное обновление. Благодаря внутренней оптимизации производительности и упрощению API верхнего уровня оно ещё сильнее закрепляет философию Vue как «прогрессивного» фреймворка: обеспечивает высокую производительность крупных приложений и одновременно даёт ощутимые удобства в повседневной разработке. Особенно важна стабилизация defineModel: она решает давнюю проблему инкапсуляции компонентов и является самым заметным достоинством этого обновления.