🎉 Сегодня вышел Vue 2.7, мост "двойки в тройку"! 🎉

Планируется, что это будет последняя минорная версия во Vue 2, которая является "мостом" для более простого перехода во Vue 3.

Поддержку Vue 2 обещают до конца 2023.

Добавлено много нового, что уже есть во Vue 3:
- Composition API
- Обновления SFC из Vue 3: script setup и v-bind в стилях

Добавление Composition API означает и добавление необходимой для него функциональности. А значит теперь и во Vue 2 есть реактивность с reactive, ref, computed и другими функциями реактивности. Конечно, ядро реактивности всё также на переопределении полей объекта с геттерами и сеттерами, а также патчинге методов массива. А значит, все ограничения реактивности сохраняются.

В SFC компиляция JS в шаблоне теперь будет работать через обработку JS в сборщике, как во Vue 3. А это значит, теперь в шаблонах можно использовать полноценный ESNext, включая долгожданную возможность использовать в шаблонах Optional chaining ?..

В документации Vue 2 пока ничего об обновлениях нет... Будем ждать.

Подробности:
- Changelog
- Блог

#news

Вчера вышел Vue 3.3.0-beta.2, а в пятницу Vue 3.3.0-beta.1

В основном фиксы багов, улучшения типизации и импортов в SFC Setup, и пометка deprecated.

Из более общих и заметных, хоть и маленьких фич - теперь console есть в области видимости шаблона. Можно дебажить консольлогами шаблон 😀

<template>
<div>{{ console.log('debug log') }}</div>
<ImageUploader @error="console.error" />
</template>

Vue 3.3 всё ближе 🚀

Changelog: https://github.com/vuejs/core/blob/main/CHANGELOG.md

Vue 3.3 Released 🎉

Вышел в релиз Vue 3.3, а за ним сразу Vue 3.3.1

Основные изменения затрагивают SFC Setup и поддержку TypeScript в нём из прошлых beta.

- Очень долгожданная поддержка импорта типов для defineProps и defineEmits. С этим многие страдали..
- Не менее долгожданная типизация слотов с defineSlots
- Дженерики в компонентах

- defineOptions - позволяет описывать опции компонента в <script setup> без второго <script>

- Экспериментальный defineModel - сокращение бойлерплейта для описания и проксирования модели
- Экспериментальный Props Destructure - деструктуризация defineProps без toRefs и ref

Ждём, пока поддержка всего появится во всех редакторах, средах разработки и других инструментах анализа кода (недостатки фич на компиляции).

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

Пост в блоге: https://blog.vuejs.org/posts/vue-3-3
Changelog: https://github.com/vuejs/core/blob/main/CHANGELOG.md#330-rurouni-kenshin-2023-05-11

Интересный выпуск у @xufostation про тестирование с #Vitest

https://t.iss.one/xufostation/869

Vue 2.7 и Prettier 3

Если вы используете Vue 2.7 и Prettier - не спешите обновляться до Prettier 3.

При компиляции шаблона в дев режиме по умолчанию результат компиляции форматируется Prettier-ом. При этом в @vue/compiler-sfc в Vue 2.7 не указан Prettier в зависимостях, а совместимости с Prettier 3 нет.

Решения:
1. Отключить форматирование скомпилированного компонента. В параметрах loader-a укажите
options: {
prettify: false
}
2. Пока не обновляться до Prettier 3

Неочевидное поведение в наследовании атрибутов.

Может ли наследование атрибутов не применяться к каким-то обработчикам незадекларированных событий?

Согласно документации Vue, по умолчанию все обработчики событий компонента либо являются собственными событиями компонента (если они описаны в emits/defineEmits), либо попадают в $attrs и наследуются корневым элементом (если наследование не отключено с inheritAttrs). Но есть ли здесь не задокументированные исключения?

Да! Событие обновления параметра (update:*) не наследуется, если этот описан пропс вне зависимости от декларирования самого события.

В примере на скриншоте onUpdateBaz одновременно:
- Не считается обработчиком события Parent и попадёт в его $attrs
- Не наследуется как атрибут в Child и не будет вызыван из ребёнка

Ссылки:
- Песочника
- Пруф: runtime-core/src/componentRenderUtils.ts filterModelListeners

🚀 Vue 3.4.0-alpha.1

Вышла первая альфа Vue 3.4!

Самые интересные изменения в реактивности:

- 🏎 Упомянутое выше ускорение реактивности
- 🌼 Долгожданный once в watch. Теперь можно однократно среагировать на изменение значения без ручного вызова stop!

// before
const foo = ref(...)
const stop = watch(foo, () => {
  // react
  stop()
})

// After v3.4
watch(foo, () => {
  // react
}, { once: true })

Также улучшили вывод ошибок компиляции шаблона в прод сборке и готовят почку для улучшения типизации в JSX.

Полный список изменений: https://github.com/vuejs/core/blob/minor/CHANGELOG.md

Для Vue разрабатываются новые vue-devtools, которые будут предоставлять возможности "похожие на новые Nuxt DevTools 1.0".

Источник: https://twitter.com/webfansplz/status/1726977545244152005

Vue 3.4.alpha.2 + alpha.3

Вчера вышло сразу две следующие альфы Vue 3.4.

🧹 Удалён Reactivity Transform ($ref сахар), который был deprecated в Vue 3.3

🫱 Добавлена сокращённая запись директивы v-bind, когда аргумент директивы совпадает со значением (аналогично { shorthand } в JS объектах ):

<input :disabled="disabled" />
<UiInput :model-value="modelValue" />

Теперь можно записывать как

<input :disabled />
<UiInput :model-value />

PR: https://github.com/vuejs/core/pull/9451

🕰 Добавлен oldValue для computed.
Подобно watch теперь можно получить старое значение вычисляемого свойства при перевычислении.
Это позволяет, например, избежать лишнего вычисления нового значения при иммутабельных изменениях

const dataObject = computed((oldValue) => {
  const newValue = computeSomeObject()
  // Если объект получился с тем же значением - возвращаем старый,
  // чтобы не создавать новый объект по новой ссылке
  // и не триггерить реактивность лишний раз
  return isEqual(newValue, oldValue) ? oldValue : newValue
})

PR: https://github.com/vuejs/core/pull/9497

👀 Улучшен DX ошибок. Теперь в ошибке в рантайме будет ссылка на страницу ошибок в документации
https://deploy-preview-2515--vuejs.netlify.app/errors/

Полный список изменений: https://github.com/vuejs/core/compare/v3.3.9...v3.4.0-alpha.3
CHANGELOG: https://github.com/vuejs/core/blob/v3.4.0-alpha.3/CHANGELOG.md

🚀 Vue 3.4.0-beta.1

- defineModel макрос больше не экспериментальный, а его производительность улучшена

- Появилась поддержка MathML тегов для шаблона

- Добавился тип ComponentInstance, позволяющий из типа описания компонента получить тип экземпляра компонента

- В валидатор пропсов теперь приходят значения других пропсов

color: {
    type: String,
    validator: (value, props) =>
        props.format === 'hex'
            ? HEX_RE.test(value)
            : RGB_RE.test(value)
},

- defineSlots теперь поддерживает keyof от generic компонентов. Это позволяет описывать тип слотов в зависимости от типа пропсов, например, для типизации универсальной таблицы

<script lang="ts" setup generic="TRow extends Record<string, unknown>">
const props = defineProps<{
  rows: TRow[] // тип объекта для каждой строки - из дженерика
  cols: { name: keyof TRow; label: string }[]
}>()

const slots = defineSlots<{
  // Тип слота для заголовкой каждой ячейки
  [K in keyof TRow as `header:${K & string}`]: (props: {
    col: { name: keyof TRow; label: string }
  }) => any[]
}>()
</script>

А также множество фиксов и улучшений для SSR и Suspense и других изменений.
Полный CHANGELOG: https://github.com/vuejs/core/blob/v3.4.0-beta.1/CHANGELOG.md