🎉 Сегодня вышел 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