Как сделать MVC в Вуе? НИКАК
https://t.me/vueist/28

Новый ChatGPT великолепен)

createSharedComposable

Если бы меня спросили лучшие паттерны для освоения во Vue, я бы точно назвал одним из них shared composable. Почему и что это за фрукт такой?

Происхождение
Первое упоминание о shared composable было в RFC Vue посвященному Effect Scope. И там говорится о примере композабла useMouse который слушает перемещения мышки и возвращает это в виде реактивных переменных координат. И вроде логично, что это не самое легковесное действие. А если это нужно множеству компонентов? Да каждый компонент использующий useMouse подписывается на него и это становится уже ощутимо. Тогда почему бы просто не вынести в глобальный STM как Pinia? Отличный вариант, но он будет работать даже когда нет никого кому нужны эти данные. И вот тут на помощь приходит shared composable он умеет как STM шарить данные на множество инстансов, но при этом если никто его не использует, то "стор" уничтожается! При этом сам паттерн универсальный и все что вам нужно это обернуть обычный композабл в createSharedComposable. И да, как только все компоненты использующие useMouse будут размонтированы shared composable тоже отпишется от событий мышки.

Как это работает?
На самом деле весьма не хитрым образом. Оно использует API Effect Scope + счетчик подписчиков, когда подписчиков становится 0 он уничтожает текущий скоуп. Вот и все. А... возможно вам не совсем знакомо что же такое Effect Scope (однажды мой доклад на эту тему уже выложат на YouTube...). А вот поэтому этот паттерн и хорош, он заставляет вас слегка заглянуть поглубже в работу Vue. Я уже приложил ссылку на RFC, где крайне подробно расписано что такое реактивные скоупы и как они работают. Если совсем сократить и упростить, то эффект скоупы это как мешок для реактивности: он запоминает все вызванные watcher-ы и уничтожает их в нужный момент (да-да именно так работает setup в компонентах). А вместо onUnmounted вы можете использовать onScopeDispose.

А чем же так крут этот паттерн еще?
1. Учебный эффект позволяющий лучше понять работу Vue
2. Возможность оптимизации как в примере c useMouse
3. Он позволяет на SPA приложениях спокойно заменить Pinia или другой STM на себя, так как спокойно выполняет обязанности глобального стейт менеджера, только еще и умеет уничтожаться когда никому не нужен (с pinia я видел как люди вручную это дело пытаются зачищать)
4. Advanced DI. По сути созданный композабл это сервис который может жить внутри provide / inject и расшаривать данные и логику как STM, но только на определенной части приложения (я не раз видело как пытаются генерировать это с pinia + id стора)

А какие есть минусы?
- Это не самое SSR Friendly решение
- Этого API нет из коробки, поэтому вам придется либо писать его самим, либо взять из vueuse
- Можно при неаккуратном использовании натворить страшных вещей
- Алгоритм использует простой счетчик, поэтому циклическая зависимость приведет к невозможности уничтожения (если не создать ручной "рубильник")

Итого: классный паттерн имеющий крайне широкие возможности с дополнительным эффектом погружения в мир реактивности Vue, однозначно рекомендую к изучению

Дождался. Доклад по Шестеренкам реактивности Vue наконец-то вышел. В нем были разобраны базовые механизмы на которых основана работа реактивности во Vue.

- Ссылка на презентацию
- Ссылка на карту реактивности

И так полезный сопровождающий материал:
- Chibivue [Ru]
- Курс от Michael Thiessen

Я не знаю зачем, но допустим

https://www.codybontecou.com/client-side-ai-with-nuxt-works-and-transformersjs

Очередные фреймворковые войны эти вот на хабре
https://habr.com/ru/articles/892406/

Тут про большие списки в вуе

https://dev.to/jacobandrewsky/handling-large-lists-efficiently-in-vue-3-4im1

Шо, а вы юзаете ллмки для написания тестов?

Короче у нас на стенде на Холи была активность в виде Дженги, на каждой палочке которой был написан вопрос по Вую или ТСу.

Тащишь, отвечаешь, следующий.
Вопросы были довольно разные, и естественно не каждый разработчик с другого фреймворка или библиотеки мог ответить на вопросы по Вую, поэтому мы рассказывали про устройство Вуя и как работает та или иная фича.

НО! Я был удивлен реакции многих фронтов с реакта, когда они такие "Да ладно! Не может так просто это работать, мне вот говорили что во Вью всё запутано, блин пойду почитаю, ого, какая дока крутая, у нас в реакте такого нет"

Не хватает конечно у Вуя освещенности среди разработчиков на других фреймворках видимо

#vue

Кстати одним из вопросов в дженге было "Чем отличается watch от watchEffect", и почему-то мало людей отвечало на него, даже среди разработчиков на Вуе, так что давайте немного теории:

watch
Это такой наблюдатель который позволяет следить за чем либо, и выполнять нужные действия когда вот это первое поменяется, ну например:

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log(`count изменился с ${oldValue} на ${newValue}`);
});

count.value = 1; // Вывод: "count изменился с 0 на 1"

Какие у него есть нюансы?
— Надо явно указать за чем ты хочешь следить
— Он начинает следить только при первом изменении переменной, если ты ему не укажешь immediate: true
— Могёт тебе показать как старое значение, так и новое
— Есть разные настройки, типа того же immediate, или например возможность указать когда именно должен работать watch, до рендеринга, или после

Причем, так то в watch тоже можно следить на несколькими элементами вот так

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
      console.log(`Count: ${newCount}, Name: ${newName}`);
      console.log(`Было: Count: ${oldCount}, Name: ${oldName}`);
});

watchEffect
Тоже наблюдатель, вот только он умеет следить сразу за несколькими переменными вот так:

import { ref, watchEffect } from 'vue';

const count = ref(0);
const multiplier = ref(2);

watchEffect(() => {
  console.log(`Результат: ${count.value * multiplier.value}`);
});

// Вывод при инициализации: "Результат: 0"
count.value = 1; // Вывод: "Результат: 2"
multiplier.value = 3; // Вывод: "Результат: 3"

Шо по нюансам?
— Не надо первым аргументом передавать то, за чем ты хочешь следить
— Он прям сразу следит за всем (не нужно указывать immediate).
— Он не покажет тебе старое и новое значение
— Подойдёт когда тебе нужно следить сразу за несколькими переменными
— Тоже есть интересные настройки типа flush для определения когда именно он должен работать
— Для отладки кстати можно заюзать onTrack и onTrigger

Ну и читаем доку конечно жи:
EN: https://vuejs.org/guide/essentials/watchers.html
RU: https://ru.vuejs.org/guide/essentials/watchers

Спасибо огромное ребятам из Msk Vue.js, каналу Vueist (Денису Чернову) и всем-всем кто помогал восстановить канал после удаления, вы лучшие! ❤️

Шо, забирайте свеженький стикерпак про вуй)
Если будут идеи для новых стикеров, пишите в комменты 🙏
Может быть на ближайший митап притащу стикерочков