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

Но только вот не у всех есть возможность оказаться в каком-то городе для оффлайн мероприятия (на мероприятии выше трансляция и запись будет). И вот я наткнулся на еще один митап: 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

Всем привет!
Ииииииии внимание, наш первый спикер 🎙

Невероятная фронтесса - Дарья Сабурова!

О чем будет доклад?
Даша расскажет сама:

С момента выхода Vue 3 прошло уже пять лет, представляете? Казалось бы, только вчера мы погружались с головой в новый подход к реактивности, горячо спорили о полезности CompositionApi и придумывали планы, как мигрировать проект с Vue 2. Но время идет и фреймворк не стоит на месте: постоянно что-то улучшается, добавляются новые возможности, а иногда и наоборот, что-то удаляется, так и не добравшись до широких масс. Так давайте же взглянем на историю развития минорных версий Vue 3: вспомним, как было трудно (а может и нет?) в самом начале и какой длинный путь проделал фреймворк к настоящему времени, посмотрим на акценты, которые были сделаны в каждом из миноров и рассмотрим наиболее интересные фичи, которые мы могли пропустить.

Интересен доклад Даши? Ставь 👍

Всем привет!
Самое время анонсировать нашего второго спикера 🎙

Поприветствуйте бурными овациями – легенда Денис Чернов!

О чем будет доклад?
Денис расскажет сам:

Composition API может вскружить голову своими возможностями и во главе угла стоят Композаблы. Что это такое и какими приемами можно подчинить их у себя на проекте, чтобы работа с ними приносила лишь радость? Со всем этим попробуем разобраться и покомпозировать композаблы

Ждешь доклад Дениса? Ставь 🔥

📢 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

📦 Vue Language Tools 3.0 was released

... but with regressions. Waiting for version 3.0.1

Changelog: https://github.com/vuejs/language-tools/releases/tag/v3.0.0

Прерываюсь с отпуска с очень грустной новостью: NuxtLabs де-факто на зарплате у Vercel теперь. Я не буду тут описывать почему это плохо. Кто понял тот понял. Но на зарплате Vercel-я теперь все основные Nuxt мейнтейнеры: Энтони, Пуя, Себастьян и Даниель.

https://github.com/nuxt/nuxt/discussions/32559
#iwanttocry

Вышла Vue v3.6.0-alpha в которой уже есть Vapor mode

Рекомендуется использовать с осторожностью в небольших приложениях полностью на Vapor или в частичной реализации компонент, которым нужна производительность

Основная идея Vapor Mode - работать с DOM в браузере напрямую, а не через VDOM, что теоретически должно дать ускорение и меньший размер бандла. На большинстве Vue приложений ни то ни то, наверно, особо заметно не будет, даже с бенчмарками

Тем не менее, наш ответ Solid.js и Svelte.
С маркетинговой точки зрения абсолютно верный шаг.

#vapor #vue

Отпуск завершен. Возвращаюсь в рабочий ритм. Но сейчас самое главное то о чем многие меня спрашивали и ждали.
Я собираюсь сделать новый цикл интенсива по вкату во Vue. Сейчас это не объявление набора, но ждите его примерно с 10-ых чисел августа.

Для кого:
1) Те кто уже умеют писать на других фреймворках, но ему любопытно познакомиться со Vue.
2) Вы уже имеете неплохую базу JS/HTML (уровень умение пояснить за стрелочную и обычную функцию, а также знание основных HTML-тегов).
3) Вы уже пишете на Vue, но недавно или боитесь что у вас много пробелов (будем прорабатывать базу).

Формат: звонок с группой, но стрим будет и общедоступный
Домашняя работа: будет, но проверка по желанию
Протяженность: 2 недели, +- каждый день по 2-3 часа по вечерам.

Что узнаем:
1) Получим основную и прочную базу по Vue
2) Получим набор бестпрактисов для проектов
3) Ознакомимся с основной окружающей экосистемой

Чего не будет:
1) Тестирования (это заслуживает отдельной работы)
2) То что полезно при написании своих библиотек/ui либ (Storybook, tsup и тд, потребует слишком много специфичных моментов для сжатого интенсива)
3) Глубокой подкапотной работы механизмов Vue (однако база будет дана достаточная для применения на практике)

Это будет не курс, скорее обкатка некоторых элементов с него.
И это будет совершенно бесплатно и в открытом доступе, сугубо из желания увеличить количество учебного материала по Vue