Forwarded from Душный Вуй
#vuejs #touch #android #ios
Статейка на тему тач-событий в Vue.js
https://blog.logrocket.com/understanding-vue-touch-events-android-ios/
Статейка на тему тач-событий в Vue.js
https://blog.logrocket.com/understanding-vue-touch-events-android-ios/
Forwarded from Душный Вуй
#vuejs
А между тем там начали собирать первые билды Vue 3.3
https://github.com/vuejs/core/blob/main/CHANGELOG.md
А между тем там начали собирать первые билды Vue 3.3
https://github.com/vuejs/core/blob/main/CHANGELOG.md
#vuejs #основы
Что то я забросил постить всякие интересности и объяснения, лентяй же.
В общем сегодня поговорим про NextTick, а то иногда кажется, что многие про него слышали, но никто не знает нафига он нужен то.
Основным применением метода
Например, если вам нужно получить размеры элемента, который только что был изменен с помощью
В примере на картинке мы используем
Карочи, если вам нужно выполнить какой-либо код после обновления DOM в ответ на изменение состояния данных, вы можете использовать метод
Что то я забросил постить всякие интересности и объяснения, лентяй же.
В общем сегодня поговорим про NextTick, а то иногда кажется, что многие про него слышали, но никто не знает нафига он нужен то.
Основным применением метода
nextTick является обновление DOM после изменения данных в реактивном состоянии. Vue.js следит за изменениями данных и обновляет DOM асинхронно, поэтому изменения не всегда отображаются мгновенно. Если вам нужно выполнить какой-либо код после того, как Vue.js обновил DOM, вы можете использовать nextTick.Например, если вам нужно получить размеры элемента, который только что был изменен с помощью
v-if или v-show, вы можете использовать nextTick для выполнения кода после обновления DOM.В примере на картинке мы используем
nextTick для выполнения метода getElementSize ПОСЛЕ того, как Vue.js обновит DOM в ответ на изменение значения showElement. Это позволяет нам получить размеры элемента после того, как он стал видимым или скрытым.Карочи, если вам нужно выполнить какой-либо код после обновления DOM в ответ на изменение состояния данных, вы можете использовать метод
nextTick.#vuejs #основы
Ааааа теперь немного поговорим про
Основная разница между `watch и `watchEffect` заключается в том, как они реагируют на изменения данных:
watch (первое изображение) - это функция, которая принимает два аргумента: первый аргумент - это реактивное значение, которое нужно отслеживать, а второй аргумент - это функция обратного вызова, которая будет вызываться каждый раз, когда значение изменяется.
Функция обратного вызова также может принимать два аргумента: новое значение и старое значение. watch предоставляет полный контроль над реактивными данными и позволяет выполнять произвольные операции в ответ на изменения.
watchEffect (второе изображение) - это функция, которая принимает один аргумент - функцию обратного вызова (callback), которая будет автоматически вызываться при любом изменении реактивных данных, на которые эта функция обратного вызова ссылается.
Ааааа теперь немного поговорим про
watch и watchEffect ребятки.Основная разница между `watch и `watchEffect` заключается в том, как они реагируют на изменения данных:
watch (первое изображение) - это функция, которая принимает два аргумента: первый аргумент - это реактивное значение, которое нужно отслеживать, а второй аргумент - это функция обратного вызова, которая будет вызываться каждый раз, когда значение изменяется.
Функция обратного вызова также может принимать два аргумента: новое значение и старое значение. watch предоставляет полный контроль над реактивными данными и позволяет выполнять произвольные операции в ответ на изменения.
watchEffect (второе изображение) - это функция, которая принимает один аргумент - функцию обратного вызова (callback), которая будет автоматически вызываться при любом изменении реактивных данных, на которые эта функция обратного вызова ссылается.
watchEffect обычно используется для реактивного выполнения побочных эффектов, таких как обновление DOM, отправка запросов на сервер или запуск анимации. Он обеспечивает более простой способ реагирования на изменения, не требуя явного указания реактивных данных для отслеживания.#vuejs #histoire
Статейка на тему написания сторизов для компонентов Vue.js с помощью аналога Storybook - Histoire + Typescript
https://blog.logrocket.com/writing-interactive-component-stories-histoire-vue-3-typescript/
Статейка на тему написания сторизов для компонентов 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.
#vuejs
https://github.com/webfansplz/vite-plugin-vue-devtools
Девтулза подключается к страницам приложения и открывается поверх интерфейса
https://github.com/webfansplz/vite-plugin-vue-devtools
Девтулза подключается к страницам приложения и открывается поверх интерфейса
Forwarded from Vue-FAQ
3 февраля 2014 года Evan You впервые опубликовал новость о новом JavaScript фреймворке Vue.js.
10 лет спустя:
#vuejs #evanyou
10 лет спустя:
#vuejs #evanyou
Forwarded from Душный Вуй
#vuejs
Оптимизация рендеринга Vue с помощью v-once и v-memo
https://fadamakis.com/vue-render-optimization-with-v-once-and-v-memo-28f39bc0e66a
Оптимизация рендеринга 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.
Forwarded from Roman
Душный Вуй
Коллеги, всем привет! С сегодняшнего дня доступен официальный перевод документации Vue js на русский язык! https://ru.vuejs.org/
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…
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…
Forwarded from Vue-FAQ
Множество различных способов написания компонентов Vue стало историческим бременем, которое создает фрагментацию среди кодовых баз и путаницу для новых разработчиков. Я думаю, что в какой-то момент нам нужно будет более четко определить, что разработчики должны использовать в новых проектах, чтобы они выглядели более последовательно - но это будет в основном изменение документации. Это не значит, что мы должны лишить возможности использовать API Options, особенно в существующих проектах.
Грамотное решение
#optionsapi #vuejs
Options API станет "недокументированными возможностями" Vue.jsГрамотное решение
#optionsapi #vuejs
Forwarded from Vue-FAQ
18 качественных отличий
- отсутствие легаси-абсурда: @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
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
В общем телега снесла канал, так что пришлось всеми возможными силами восстанавливать как смог. Зовите друзей Вуюшников, переманивайте Реактеров, уговаривайте Ангулярщиков и приглашайте Свелтистов 😁
Давайте снова вместе вдохнём жизнь в это сообщество💚
https://t.me/stuffy_vuejs
Давайте снова вместе вдохнём жизнь в это сообщество
https://t.me/stuffy_vuejs
Please open Telegram to view this post
VIEW IN TELEGRAM
Telegram
Душный Вуй
Немного душные, но ламповые заметки о Vue.js
#vuejs #vue #nuxt #vuex #pinia #вью #vapor
#vuejs #vue #nuxt #vuex #pinia #вью #vapor
Кстате, если шо у нас есть чатик тут
https://t.me/stuffy_vuejs_chat
https://t.me/stuffy_vuejs_chat
Telegram
Чат Душного Вуя
Чат о Vue.js, Nuxt.js, Pinia, Vuex, Vite и т.д.
#vuejs #vue #nuxt #vuex #pinia #вью
#vuejs #vue #nuxt #vuex #pinia #вью