📢 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

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

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

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

С момента выхода 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