#vuejs #основы
Ааааа теперь немного поговорим про
Основная разница между `watch и `watchEffect` заключается в том, как они реагируют на изменения данных:
watch (первое изображение) - это функция, которая принимает два аргумента: первый аргумент - это реактивное значение, которое нужно отслеживать, а второй аргумент - это функция обратного вызова, которая будет вызываться каждый раз, когда значение изменяется.
Функция обратного вызова также может принимать два аргумента: новое значение и старое значение. watch предоставляет полный контроль над реактивными данными и позволяет выполнять произвольные операции в ответ на изменения.
watchEffect (второе изображение) - это функция, которая принимает один аргумент - функцию обратного вызова (callback), которая будет автоматически вызываться при любом изменении реактивных данных, на которые эта функция обратного вызова ссылается.
Ааааа теперь немного поговорим про
watch и watchEffect ребятки.Основная разница между `watch и `watchEffect` заключается в том, как они реагируют на изменения данных:
watch (первое изображение) - это функция, которая принимает два аргумента: первый аргумент - это реактивное значение, которое нужно отслеживать, а второй аргумент - это функция обратного вызова, которая будет вызываться каждый раз, когда значение изменяется.
Функция обратного вызова также может принимать два аргумента: новое значение и старое значение. watch предоставляет полный контроль над реактивными данными и позволяет выполнять произвольные операции в ответ на изменения.
watchEffect (второе изображение) - это функция, которая принимает один аргумент - функцию обратного вызова (callback), которая будет автоматически вызываться при любом изменении реактивных данных, на которые эта функция обратного вызова ссылается.
watchEffect обычно используется для реактивного выполнения побочных эффектов, таких как обновление DOM, отправка запросов на сервер или запуск анимации. Он обеспечивает более простой способ реагирования на изменения, не требуя явного указания реактивных данных для отслеживания.#vue #основы
Хм, а вы используете
В Vue.js 3
Использование
Например, предположим, что у нас есть следующий объект состояния:
Хм, а вы используете
readonly в Vue? Оказывается многие про него даже не слышали.В Vue.js 3
readonly - это функция, которая принимает объект и возвращает его неизменяемую версию. Это значит, что свойства объекта могут быть только прочитаны, но не могут быть изменены.Использование
readonly особенно полезно при работе с состоянием приложения (state), так как предотвращает случайные мутации данных, которые могут привести к неожиданному поведению приложения.Например, предположим, что у нас есть следующий объект состояния:
const state = reactive({
count: 0,
message: "Hello, World!"
});
Если мы хотим создать копию этого объекта, которую нельзя изменить, мы можем использовать readonly следующим образом:const readonlyState = readonly(state);Теперь мы можем использовать readonlyState вместо state в нашем приложении, чтобы предотвратить несанкционированные изменения состояния.
// это приведет к ошибкеПодробнее в доке
readonlyState.count = 1;
// это работает
console.log(readonlyState.count); // 0
console.log(readonlyState.message); // "Hello, World!"
https://shiny-button.vercel.app/
Никак не относится к Вую, но просто забавная идея кнопки с отражением юзера)
Она ещё и заляпывается если часто по ней кликать 😅
Никак не относится к Вую, но просто забавная идея кнопки с отражением юзера)
Она ещё и заляпывается если часто по ней кликать 😅
✨ Nuxt 3.3.1
🚀 Улучшения производительности
🧑💻 Улучшения DX для разработки локальных модулей
⚗️ Обновление с множеством улучшений Nitro 2.3
♻️ Возможность управления перезагрузкой сервера
💪 Улучшения типизации
🩹 Исправления ошибок
и многое другое!
https://github.com/nuxt/nuxt/releases/tag/v3.3.1
🚀 Улучшения производительности
🧑💻 Улучшения DX для разработки локальных модулей
⚗️ Обновление с множеством улучшений Nitro 2.3
♻️ Возможность управления перезагрузкой сервера
💪 Улучшения типизации
🩹 Исправления ошибок
и многое другое!
https://github.com/nuxt/nuxt/releases/tag/v3.3.1
GitHub
Release v3.3.1 · nuxt/nuxt
3.3.0 is a minor (feature) release with lots of new features to play with. 3.3.1 was a swiftly following release to patch an issue with nuxi on Windows.
👀 Highlights
✨ Local module development DX
...
👀 Highlights
✨ Local module development DX
...
✨ Nuxt 3.3.2
🩹 Большое количество исправления ошибок
💪 Улучшения типизации
📖 Доработка документации
команда Nuxt не только выкатывает новые фичи, но и не забывает фиксить баги!
https://github.com/nuxt/nuxt/releases/tag/v3.3.2
🩹 Большое количество исправления ошибок
💪 Улучшения типизации
📖 Доработка документации
команда Nuxt не только выкатывает новые фичи, но и не забывает фиксить баги!
https://github.com/nuxt/nuxt/releases/tag/v3.3.2
GitHub
Release v3.3.2 · nuxt/nuxt
3.3.2 is a patch release with plenty of bug fixes.
✅ Upgrading
As usual, our recommendation for upgrading is to run:
nuxi upgrade --force
This will refresh your lockfile as well, and ensures that ...
✅ Upgrading
As usual, our recommendation for upgrading is to run:
nuxi upgrade --force
This will refresh your lockfile as well, and ensures that ...
Чёт там потихоньку альфы Vue.js 3.3 выходят, кому интересно гляньте, а кому на эту тему есть, что рассказать рассказывайте в комментах)
https://github.com/vuejs/core/blob/main/CHANGELOG.md
https://github.com/vuejs/core/blob/main/CHANGELOG.md
GitHub
core/CHANGELOG.md at main · vuejs/core
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. - vuejs/core
#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 #histoire Статейка на тему написания сторизов для компонентов Vue.js с помощью аналога Storybook - Histoire + Typescript https://blog.logrocket.com/writing-interactive-component-stories-histoire-vue-3-typescript/
LogRocket Blog
Improve component stories with Histoire - LogRocket Blog
Histoire is a frontend tool that helps developers sandbox their UI components by creating stories, and is a competitor to Storybook.
Chrome 112 начал поддерживать CSS Nesting! Официальный! Который теперь часть спецификации:
https://www.w3.org/TR/css-nesting-1/
https://www.w3.org/TR/css-nesting-1/
.nesting {
color: hotpink;
> .is {
color: rebeccapurple;
> .awesome {
color: deeppink;
}
}
}Тем временем подъехала новая версия Nuxt 3.4.0 🎊🎉
🛠️ Более простая конфигурация Devtools
🎁 Объектный синтаксис при создании плагинов
🪄 Transitions API для переходов между страницами
а так же много всего интересного, команда накста аж целый пост запилила в своем блоге https://nuxt.com/blog/v3-4
на самом деле в релизноутах сильно больше описано всякого, кому интересно обязательно заглядывайте 👀
https://github.com/nuxt/nuxt/releases/tag/v3.4.0
🛠️ Более простая конфигурация Devtools
🎁 Объектный синтаксис при создании плагинов
🪄 Transitions API для переходов между страницами
а так же много всего интересного, команда накста аж целый пост запилила в своем блоге https://nuxt.com/blog/v3-4
на самом деле в релизноутах сильно больше описано всякого, кому интересно обязательно заглядывайте 👀
https://github.com/nuxt/nuxt/releases/tag/v3.4.0
Nuxt
Nuxt 3.4 · Nuxt Blog
Nuxt 3.4.0 is the latest release of Nuxt 3, bringing exciting new features, including support for the View Transitions API, transferring rich JavaScript payloads from server to client - and much more.
Вы не поверите, какой сегодня день недели 😏
Вышел Vue 3.3.0
https://blog.vuejs.org/posts/vue-3-3
🍾 Reactivity Transform ($ref) признано устаревшим, но сделали defineProps с реактивными переменными (opt-in)
👩💻 Много улучшений для типизации: импорт типов, generic-компоненты, удобные defineProps, даже слоты можно типизировать
🚀Улучшили toRef и ввели toValue (нет, это не unref)
Весь список:
https://blog.vuejs.org/posts/vue-3-3
Вышел Vue 3.3.0
https://blog.vuejs.org/posts/vue-3-3
🍾 Reactivity Transform ($ref) признано устаревшим, но сделали defineProps с реактивными переменными (opt-in)
🚀Улучшили toRef и ввели toValue (нет, это не unref)
Весь список:
https://blog.vuejs.org/posts/vue-3-3
Please open Telegram to view this post
VIEW IN TELEGRAM
blog.vuejs.org
Announcing Vue 3.3 | The Vue Point
The official blog for the Vue.js project
Сегодня конечно не четверг, но держите новый релиз Nuxt!
⚡️Обновили vue до v3.3.0
🙌 Обновили Nitropack до v2.4
⏰ Реализовали конфигурацию под разные environment
На самом деле там ещё много интересного, а я пойду обновлю накст у себя в проекте
https://github.com/nuxt/nuxt/releases/tag/v3.5.0
⚡️Обновили vue до v3.3.0
🙌 Обновили Nitropack до v2.4
⏰ Реализовали конфигурацию под разные environment
На самом деле там ещё много интересного, а я пойду обновлю накст у себя в проекте
nuxi upgrade --force 😉https://github.com/nuxt/nuxt/releases/tag/v3.5.0
GitHub
Release v3.5.0 · nuxt/nuxt
3.5.0 is a minor (feature) release with lots of new features to play with.
👀 Highlights
⚡️ Vue 3.3 released!
Vue 3.3 has been released, with lots of exciting features, particularly around type sup...
👀 Highlights
⚡️ Vue 3.3 released!
Vue 3.3 has been released, with lots of exciting features, particularly around type sup...
В прошлую пятницу вышло большое обновление Nuxt v3.6.0, в этом релизе выкатили много всего
🧩 Дали возможность делать кастомный индикатор загрузки в spa режиме
⚡️ Улучшили производительность
🔥 Улучшили статичные серверные компоненты, теперь они не занимают основной бандл
🎨 Улучшили дедупликацию глобальных стилей
🎬 Подкрутили возможности для анимации страниц
✨ Добавили поддержку провайдеров, для генерации статических ресурсов (пока только для vercel и netlify)
💪 Улучшили поддержку типов
⚗️ Обновили Nitro до v2.5, там кстати много интересного, в том числе экспериментальная поддержка потокового рендеринга
🛠️ Добавили разных утилит для разработчиков модулей
Конечно же, ознакомиться со всем списком изменений можно в changelog
P.S. В ближайший месяц ждем версию 3.7, с еще большим списком улучшений 😉
🧩 Дали возможность делать кастомный индикатор загрузки в spa режиме
⚡️ Улучшили производительность
🔥 Улучшили статичные серверные компоненты, теперь они не занимают основной бандл
🎨 Улучшили дедупликацию глобальных стилей
🎬 Подкрутили возможности для анимации страниц
✨ Добавили поддержку провайдеров, для генерации статических ресурсов (пока только для vercel и netlify)
💪 Улучшили поддержку типов
⚗️ Обновили Nitro до v2.5, там кстати много интересного, в том числе экспериментальная поддержка потокового рендеринга
🛠️ Добавили разных утилит для разработчиков модулей
Конечно же, ознакомиться со всем списком изменений можно в changelog
P.S. В ближайший месяц ждем версию 3.7, с еще большим списком улучшений 😉
Всем дороу!
Правильно ли я понимаю, что если я у меня есть базовый интерфейс для эмитов, то заэкстендить с заменой типа значения я его не могу в новом синтаксисе?
Типа есть вот:
Правильно ли я понимаю, что если я у меня есть базовый интерфейс для эмитов, то заэкстендить с заменой типа значения я его не могу в новом синтаксисе?
Типа есть вот:
interface IBaseInputEmits {
'update:modelValue': [value: InputModelValueType]
'change': [value: Event]
}
И я не могу сделатьinterface ISomeNewInput extends IBaseInputEmits {
'update:modelValue': [value: number | string]
'change': [value: number | string]
}
const emit = defineEmits<ISomeNewInput>()Я вот что не пойму, вот есть у меня интерфейс для эмитов в новом синтаксисе
export interface IBaseInputEmits {
'update:modelValue': [value: InputModelValueType]
'focus': [value: Event]
'blur': [value: Event]
'input': [value: Event]
'change': [value: Event]
'keydown': [value: Event]
'keyup': [value: Event]
'request-start': [value: string | object]
'request-done': [value: string | object]
'request-failed': [value: string | object]
}
Я его пытаюсь использовать в defineEmits:const emit = defineEmits<IBaseInputEmits>()
Почему шторму это не нравится?Роадмап по Вую тут увидел
https://roadmap.sh/vue
https://roadmap.sh/vue
roadmap.sh
Vue Developer Roadmap: Learn to become a Vue developer
Community driven, articles, resources, guides, interview questions, quizzes for vue development. Learn to become a modern Vue developer by following the steps, skills, resources and guides listed in this roadmap.