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

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

Народ, а как вы обходите региональные ограничения при работе с 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