https://habr.com/ru/companies/ssp-soft/articles/902974/

Может кому интересно

Ноооооооовости

📢 Issue 195 is Out!

I published a new issue of my weekly Vue & Nuxt newsletter.

🔗 Check it out: https://weekly-vue.news/issues/v2/159

В GitLab-e уже тестируют rolldown-vite

Скорость сборки примерно в 5 раз быстрей, и значительно меньше потребление памяти

#gitlab #rolldown #vite

Шо там по новостям?

📢 Issue 196 is Out!

I published a new issue of my weekly Vue & Nuxt newsletter.

🔗 Check it out: https://weekly-vue.news/issues/v2/160

С постами туго, так как готовлюсь к митапу ссылка на который выше, скоро там будет уже анонс доклада (по секрету это о работе с композаблами).

Но только вот не у всех есть возможность оказаться в каком-то городе для оффлайн мероприятия (на мероприятии выше трансляция и запись будет). И вот я наткнулся на еще один митап: Vuejs Talks от кор команды Vuestic UI. Митап проходит в онлайн формате на английском, так что это шанс получить общение или даже выступить впервые на английском языке (я себе галочку уже поставил, что планирую это сделать).

Самая классная часть, что проводится митап регулярно фактически каждый месяц. Следующий митап будет 18 июня.
Зарегистрироваться можно здесь
Если же захотели стать спикером

PS, а еще как член ПК Holy.js я бы очень сильно хотел видеть заявки на доклады по Vue экосистеме у нас. Поэтому если у вас есть идеи или желания, то welcome (возможно даже выступление удаленно)

#мероприятия

Невнимательность и реактивность

Недавно в чате человек столкнулся с проблемой, что "меняя нереактивный массив он видел изменения в рендере". В чате сразу начали возникать: мол раз reactive был передан, то это уже реактивный массив. Давайте разбираться

1. Меняется ли исходный объект при передачи в reactive?
Нет. Объект сам не меняется, однако Proxy создаваемое от reactive будет мутировать именно переданный объект. Возможно это очевидно, но:
- во Vue2 редактировался исходный объект. Там каждое поле объекта становилось getter + setter (при этом во всю глубину) и конечно же такой подход имел свои последствия.
- В других фреймворках, например Svelte может быть иное поведение. Там Proxy лишь основывается на начальном объекте и мутации не идут в исходный объект

2. Отслеживает ли Vue мутации в исходном нереактивном объекте?
Нет. Однако, Proxy все-таки основан на оригинальном объекте и если кто-то изменит объект, а потом это значение прочтут реактивно, то, конечно же, будет получено актуальное значение

const a = { hello: 0 }
const aReactive = reactve(a)
const b = ref(2)
const mult = computed(() => aReactive.hello * b.value)
console.log(mult.value) // 0 * 2 = 0
a.hello = 2
console.log(mult.value) // все еще 0, Vue не знает об обновлении
b.value = 1
console.log(mult.value) // 2 * 1 = 2, так как изменилось другое реактивное значение, то Vue пересчитал computed

Кажется очевидным, но в Svelte опять же после создания реактивного значения связь с нереактивным теряется

Вот по сути 2 ключевых момента которые ввели в ступор разработчика, он не заметил, что каждую секунду из-за useFps у него происходил ререндр компонента и не мог понять почему видит обновления в нереактивных данных.

Однако затронем пару еще интересных моментов:

Знает ли Vue, что уже существует Proxy для отслеживания конкретного объекта?
Да. Vue имеет специальные WeakMap-ы со всеми существующими Proxy от реактивности (но доступа к ним прямого нет, он спрятан в исходниках @vue/reactivity)
Проверить это достаточно легко:

const a = { hello: 0 }
const aReactive1 = reactive(a)
const aReactive2 = reactive(a)
console.log(aReactive1 === aReactive2) // true

Это важная часть оптимизация реактивности Vue позволяющая существенно экономить память при работе с объектами, так как на каждый объект не более 1 соответствующего Proxy. Однако у вас нет к этому доступа

Есть ли какие-то данные в Proxy от reactive которых нет в исходном объекте?
Есть, их не существует в объекте, но Proxy особым образом проверяет на доступ к ним. И это ReactiveFlags и хотя у вас есть доступ к этим флагам, все-таки лучше использовать соответсвющие утилити функции от Vue

console.log(aReactive[ReactiveFlags.IS_REACTIVE] === isReactive(aReactive))
// и тд

#learn #reactivity

🚀 Вышла первая альфа-версия Nuxt 4!

Изначально Nuxt 4 планировался к выпуску в июне 2024, однако команда пересмотрела подход:

Альфа-версия: июнь 2025 (уже доступна!)
Стабильный релиз: конец июня 2025
Nuxt 5: позже, после готовности Nitro v3

🔥 Ключевые изменения

⚡️ Nitropack v3 nightly
Самое значимое обновление — интеграция с Nitropack v3 nightly, что обещает улучшенную производительность и новые возможности.

🎨 Обновленные UI-шаблоны
Шаблоны пользовательского интерфейса полностью обновлены под брендинг v4.

📦 Масштабные обновления зависимостей
Обновлены до последних версий ключевые зависимости: c12, jiti, unbuild, unimport и множество других.

📋 Что планируется в ближайшие недели
Pull Request'ы для модулей сообщества в nuxt/modules registry
Полный гайд по миграции с Nuxt 3 на Nuxt 4
Только багфиксы для v3 в этом месяце
Обновление документации на nuxt.com с переключением между версиями
Release Candidate планируется на 23 июня

⚠️ Важные моменты для разработчиков

На стадии альфы:
Планируются дополнительные breaking changes
Возможны баги и "трения" в использовании

На стадии беты:
Breaking changes не планируются, но могут быть при необходимости
На стадии RC:
Только исправления багов

🧪 Как попробовать
Команда призывает early adopters (ранних пользователей) тестировать новую версию и сообщать о найденных проблемах в репозиторий Nuxt или используемых модулей.
Следить за прогрессом можно через Nuxt 4 milestone на GitHub.

Тадаам h3 v2 уже сдесь 🎉

https://github.com/orgs/h3js/discussions/1101

📢 Issue 202 is Out!

I published a new issue of my weekly Vue & Nuxt newsletter.

🔗 Check it out: https://weekly-vue.news/issues/v2/166

Доклад Дениса Чернова про композаблы с митапа MskVue.js #13

#event

Вот с этого замечательного митапа кстати
https://t.me/mskvuejs_news