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

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

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

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

#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 (Денису Чернову) и всем-всем кто помогал восстановить канал после удаления, вы лучшие! ❤️

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

Народ, а как вы обходите региональные ограничения при работе с API ChatGPT с российского сервера?

Кто-то уже пробовал разворачивать что-то на NativeScript Vue? Достойный аналог капаситора, или все ещё фигня?

#vue

Иногда пишешь компонент, прокидываешь в него всякие id, class, style и прочие data-*, а они куда-то теряются. А всё потому, что Vue по умолчанию не лепит эти атрибуты на все элементы подряд. Но есть нюансы 👇

Что вообще происходит?

Vue берёт все атрибуты, которые ты НЕ объявил явно в props, и добавляет их к корневому элементу твоего компонента.

<MyButton class="big red" id="super-btn" />

<!-- Внутри MyButton.vue -->
<template>
  <button>Нажми</button>
</template>

👉 В итоге на кнопке окажутся и class="big red", и id="super-btn". Удобно? Удобно.

А если у меня кастомная разметка?
Если ты хочешь, чтобы атрибуты не просто свалились куда попало, а чтобы ты сам решил — кому их отдать. Тогда тебе пригодится юзать v-bind="$attrs".

<template>
 <div>
   <button>Жмек-с</buitton>
   <button v-bind="$attrs">Жмак</button>
 </div>
</template>

Иногда ты вообще не хочешь, чтобы Vue сам что-то передавал. Например, если ты хочешь полный контроль. Тогда пишешь:

<template>
  <div class="wrapper">
    <button v-bind="$attrs">Кнопка</button>
  </div>
</template>

<script setup>
defineOptions({
  inheritAttrs: false
})
</script>

👉 В этом случае все атрибуты пойдут только на кнопку, а не на обёртку. Особенно полезно, если тебе важно, чтобы стили/события применялись именно к интерактивному элементу.

Важные моменты

— Всё, что не prop — это $attrs
— По умолчанию всё это идёт в корневой элемент
— Хочешь контроль — юзай inheritAttrs: false и v-bind="$attrs"
— $attrs можно использовать и в setup, и в template
— Если атрибут совпадает с именем prop — он туда не попадёт

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

Отус накидали про defineExpose на Хабре
https://habr.com/ru/companies/otus/articles/899344/

Кстате, если шо у нас есть чатик тут
https://t.me/stuffy_vuejs_chat

О, свеженькие викли ньюз про Вуй подъехали
https://weekly-vue.news/issues/v2/157

https://ui-libs.vercel.app/

Выбираем правильные либы для вуя и нухта

#vue

KeepAlive во Vue 3 — теперь с бонусами 🎁

KeepAlive — это специальный компонент-обёртка, который позволяет кешировать компонент, когда он удаляется из DOM. То есть Vue его не уничтожает, а аккуратно откладывает "на потом". Это как display: none, только с сохранением всех данных, реактивности и внутреннего состояния.

Типичный кейс:

У тебя табы или роуты, и ты хочешь, чтобы при переключении вкладки не терялись вводимые данные, скролл и т.д.

<KeepAlive>
  <component :is="currentTabComponent" />
</KeepAlive>

А если я хочу контролировать, что именно кешируется?

У KeepAlive в Vue 2.1.0+ есть пропсы include и exclude, туда можно вписать имена компонентов:

<!-- строка, разделённая запятыми -->
<KeepAlive include="a,b">
  <component :is="view" />
</KeepAlive>

<!-- регулярное выражение (используйте `v-bind`) -->
<KeepAlive :include="/a|b/">
  <component :is="view" />
</KeepAlive>

<!-- массив (используйте `v-bind`) -->
<KeepAlive :include="['a', 'b']">
  <component :is="view" />
</KeepAlive>

А ещё можно использовать max, чтобы указать, сколько компонентов максимум можно держать в памяти.

<KeepAlive :max="2">
  <component :is="currentTabComponent" />
</KeepAlive>

Что нового во Vue 3?
Раньше было просто: компонент либо кешировался, либо нет. А теперь у нас больше гибкости:

Новое поведение: onActivated и onDeactivated

Когда компонент попадает в KeepAlive, Vue не вызывает unmounted, как обычно. Вместо этого срабатывают хуки:

onActivated(() => {
  console.log('Я снова в деле!');
});

onDeactivated(() => {
  console.log('Пошёл отдыхать');
});

Это значит, что ты можешь спокойно ставить на паузу таймеры, отписываться от чего-то тяжёлого, останавливать анимации и т.д.

Когда не надо использовать?
— Если компонент дешёвый (рендерится быстро)
— Если тебе не важно сохранять состояние
— Если ты хочешь, чтобы он пересоздавался при каждом появлении

TL;DR:
— KeepAlive сохраняет компоненты в памяти
— Не вызывает unmounted, используй onActivated и onDeactivated
— Можно фильтровать компоненты через include / exclude
— Есть max — ограничитель памяти
— Работает только с одним дочерним компонентом (или <component>)

Ну и дока
RU: https://ru.vuejs.org/guide/built-ins/keep-alive
EN: https://vuejs.org/guide/built-ins/keep-alive.html