#vue

Немного о том как работает Вуй под капотом
https://ubugeeei.github.io/chibivue/

Прислал @teleskop150750

#vue
Что-то где-то там Хэллоуин говорят, вот вам картинку в тему))

#vue #vueform
Там VueForm теперь OpenSource 🎉

https://vueform.com/news/20231020-vueform-is-now-open-source

#vue #критика

Автор: @Indy660
Ссылка: https://github.com/Indy660/player_with_my_favorite_music
GH Pages: https://indy660.github.io/player_with_my_favorite_music/#tab=all&track=0

#vue #критика

Автор: @sultondev
Ссылка: https://www.npmjs.com/package/vue-hover-effect
Ссылка на борду: https://volta.net/sultondev/vue-hover-effect

#vue #критика

Автор: @Gitm4n
Ссылка: https://github.com/GitM4n/rick-and-mory-v2/tree/master
Сайт: https://rick-morty-v2.netlify.app/

#vue #критика
Продолжаем обозревать ваши проекты, на очереди у нас целое радио)

Автор: @AlAstroMoody
Код: https://github.com/AlAstroMoody/radio
Приложение: https://alastromoody.github.io/radio/

#vue #критика

Автор: @thejesusdead
Npm: https://www.npmjs.com/package/vue-histogram-dual-range
Github: https://github.com/CodeXiD/vue-histogram-dual-range#readme

#vue #критика

Автор: @thejesusdead
Npm: https://www.npmjs.com/package/vue-swipe-sheet
Github: https://github.com/CodeXiD/vue-swipe-sheet

#vue #критика

Продолжаем, на очереди у нас приложенька для подсчета стоимости вашей работы)

Автор: @z1kYz3r
Web: https://time2money.zq.lt
Chrome extension:
https://chromewebstore.google.com/detail/time-to-money-calculator/hmlelnagnhidpaifchocofnbikmpipmb
Github: https://github.com/zikju/time-to-money-calculator

#vue #критика

UI для мультиплеерного мода M&B:Bannerlord
Без адаптива (не нужен)
Авторизация через Steam/Xbox/Epic (чтобы увидеть все разделы)
Много unit-тестов

Автор: @zohan333

Web: https://c-rpg.eu/

https://c-rpg.eu/strategus/ - WIP режим глобальной карты

GitHub: https://github.com/namidaka/crpg

#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