Душный Вуй

#vuejs #основы

Что то я забросил постить всякие интересности и объяснения, лентяй же.

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

Основным применением метода nextTick является обновление DOM после изменения данных в реактивном состоянии. Vue.js следит за изменениями данных и обновляет DOM асинхронно, поэтому изменения не всегда отображаются мгновенно. Если вам нужно выполнить какой-либо код после того, как Vue.js обновил DOM, вы можете использовать nextTick.

Например, если вам нужно получить размеры элемента, который только что был изменен с помощью v-if или v-show, вы можете использовать nextTick для выполнения кода после обновления DOM.

В примере на картинке мы используем nextTick для выполнения метода getElementSize ПОСЛЕ того, как Vue.js обновит DOM в ответ на изменение значения showElement. Это позволяет нам получить размеры элемента после того, как он стал видимым или скрытым.

Карочи, если вам нужно выполнить какой-либо код после обновления DOM в ответ на изменение состояния данных, вы можете использовать метод nextTick.

5 views08:38

April 9

Душный Вуй

#vuejs #основы

Ааааа теперь немного поговорим про watch и watchEffect ребятки.

Основная разница между `watch и `watchEffect` заключается в том, как они реагируют на изменения данных:

watch (первое изображение) - это функция, которая принимает два аргумента: первый аргумент - это реактивное значение, которое нужно отслеживать, а второй аргумент - это функция обратного вызова, которая будет вызываться каждый раз, когда значение изменяется.

Функция обратного вызова также может принимать два аргумента: новое значение и старое значение. watch предоставляет полный контроль над реактивными данными и позволяет выполнять произвольные операции в ответ на изменения.

watchEffect (второе изображение) - это функция, которая принимает один аргумент - функцию обратного вызова (callback), которая будет автоматически вызываться при любом изменении реактивных данных, на которые эта функция обратного вызова ссылается.

watchEffect обычно используется для реактивного выполнения побочных эффектов, таких как обновление DOM, отправка запросов на сервер или запуск анимации. Он обеспечивает более простой способ реагирования на изменения, не требуя явного указания реактивных данных для отслеживания.

3 views08:38

April 9

Душный Вуй

#vuejs #piniaorm

Немного про Pinia ORM во Vue тут в статье
https://blog.openreplay.com/managing-state-in-vue-with-pinia-orm/

Openreplay

Managing State in Vue with Pinia ORM

Add ORM-features to Pinia for better state management in Vue.

5 views08:38

April 9

Душный Вуй

#vuejs #histoire

Статейка на тему написания сторизов для компонентов Vue.js с помощью аналога Storybook - Histoire + Typescript
https://blog.logrocket.com/writing-interactive-component-stories-histoire-vue-3-typescript/

LogRocket Blog

Writing interactive component stories with Histoire in Vue 3 and TypeScript - LogRocket Blog

Learn how Histoire, a Vue-focused Storybook alternative, can help you illustrate your different development patterns and more.

3 views08:38

April 9

Душный Вуй

#vuejs

https://habr.com/ru/articles/770512/

Хабр

Vue3 provide-inject di

Vue3 прекрасный фреймворк, писать на котором одно удовольствие. Кто не пробовал - попробуйте, а кто юзает - наслаждайтесь. Сегодня хотелось бы написать о такой возможности, как передача данных в...

8 views08:38

April 9

Душный Вуй

#vuejs

Немного вуюшных обоев для мобилки))

6 views08:38

April 9

Душный Вуй

#vuejs #pinia

https://play.pinia.vuejs.org/

Песочница для Pinia

8 views08:38

April 9

Душный Вуй

#vuejs

Удобные формы для Vue 3 / Хабр
https://habr.com/ru/articles/774606/

Хабр

Удобные формы для Vue 3

Механизм реактивности VueJS и нововведение в направлении provide/inject позволяют разработчикам экспериментировать и реализовывать новые интересные решения. В этой статье я расскажу о жизненном цикле...

9 views08:38

April 9

Душный Вуй

#vuejs

https://github.com/webfansplz/vite-plugin-vue-devtools

Девтулза подключается к страницам приложения и открывается поверх интерфейса

6 views08:38

April 9

Душный Вуй

Forwarded from Vue-FAQ

3 февраля 2014 года Evan You впервые опубликовал новость о новом JavaScript фреймворке Vue.js.

10 лет спустя:

#vuejs #evanyou

9 views08:46

April 9

Душный Вуй

Forwarded from Душный Вуй

#vuejs

Оптимизация рендеринга Vue с помощью v-once и v-memo

https://fadamakis.com/vue-render-optimization-with-v-once-and-v-memo-28f39bc0e66a

Medium

Vue Render Optimization with v-once and v-memo

Front-end frameworks, like Vue and React, gained popularity as a response to JavaScript’s lack of reactivity.

8 views08:46

April 9

Душный Вуй

Forwarded from Roman

Душный Вуй

Коллеги, всем привет! С сегодняшнего дня доступен официальный перевод документации Vue js на русский язык! https://ru.vuejs.org/

Может, кто не видел (есть русские сабы):

https://youtu.be/OrxmtDw4pVI?feature=shared

YouTube

Vue.js: The Documentary

by honeypot.io | What began as a side project of a Google developer
now shares the JS leaderboard with #React and #Angular...
With the help of Sarah Drasner, Taylor Otwell, Thorsten Lünborg and many others from the Vue.js community, Evan You tells the story…

11 views08:46

April 9

Душный Вуй

Forwarded from Vue-FAQ

Множество различных способов написания компонентов Vue стало историческим бременем, которое создает фрагментацию среди кодовых баз и путаницу для новых разработчиков. Я думаю, что в какой-то момент нам нужно будет более четко определить, что разработчики должны использовать в новых проектах, чтобы они выглядели более последовательно - но это будет в основном изменение документации. Это не значит, что мы должны лишить возможности использовать API Options, особенно в существующих проектах.

Options API станет "недокументированными возможностями" Vue.js

Грамотное решение

#optionsapi #vuejs

8 views08:46

April 9

Душный Вуй

Forwarded from Vue-FAQ

18 качественных отличий Vue от React от Artyom Tuchkov

- отсутствие легаси-абсурда: @change во вью - это реальный change, а не input, как в реакте, мимикрирующий под change
- отсутствие stale closure и всех связанных с ним проблем
- автоматический трекинг зависимостей, нет костылей типа useCallback
- удобные хелперы из коробки (привет либам clsx и classnames)
- удобный DSL, а не стремный JSX
- нет useEffect и миллиарда статей и докладов на тему “вы неправильно используете useEffect”
- нет проблем с воображением, когда добавляют новые фичи - useImperativeHandle и dangerouslySetInnerHTML
- есть сахар для работы с формами - v-model
- есть слоты
- нет костыльного стриктмода, который, прости хоспаде, твой код запускает дважды, чтобы тебе было приятнее работать избавить тебя от багов
- нет monkey-patching’а нативных console и fetch
- нет ререндеров на любой чих
- нет 50 вложенных контекстов в руте приложения
- нет прекрасного forwardRef
- есть нормальная система плагинов
- есть реактивность для Map/Set из коробки
- есть нормальная мутабельность без сотни копий всего подряд
- есть nextTick, не надо костылить с flushSync

#react #vuejs

22 views08:46

April 9

Душный Вуй

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

😁

Давайте снова вместе вдохнём жизнь в это сообщество