Vue-FAQ

Forwarded from Denis Chernov

Напряг нейронку на примитивные тесты

┌─────────────────────────┬────────────────┬────────────┬───────────┬────────────┐
│ Test Case               │ Operation      │      Vue 2 │     Vue 3 │ Difference │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Small Object            │ Creation       │   282.35ms │  282.63ms │       0.1% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Small Object            │ Updates        │    15.22ms │   43.31ms │     184.6% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Medium Object           │ Creation       │  1851.82ms │  457.59ms │     -75.3% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Medium Object           │ Updates        │     2.34ms │   19.17ms │     720.8% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Large Object            │ Creation       │  6744.25ms │ 1808.13ms │     -73.2% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Large Object            │ Updates        │     1.84ms │   25.53ms │    1283.5% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Object Assignment Tests │ Creation       │   627.95ms │  371.53ms │     -40.8% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Object Assignment Tests │ Updates        │   145.56ms │  155.88ms │       7.1% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Object Assignment Tests │ Assignment     │   192.23ms │   60.92ms │     -68.3% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Deep Nested Object      │ Creation       │ 12068.51ms │ 2931.10ms │     -75.7% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Deep Nested Object      │ Updates        │     1.93ms │   20.38ms │     958.4% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Deep Nested Object      │ Deep Update    │     7.17ms │   63.64ms │     788.3% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Wide Object             │ Creation       │  3473.25ms │ 1089.35ms │     -68.6% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Wide Object             │ Updates        │     1.93ms │   26.83ms │    1294.0% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ -                       │ -              │          - │         - │          - │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Complex Updates         │ Creation       │   810.08ms │  422.19ms │     -47.9% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Complex Updates         │ Updates        │     1.98ms │   19.96ms │     908.1% │
├─────────────────────────┼────────────────┼────────────┼───────────┼────────────┤
│ Complex Updates         │ Complex Update │   196.00ms │   78.74ms │     -59.8% │

👍3❤2👎2

836 views10:46

Vue-FAQ

AbortController можно применять не только для отмены сетевого запроса, но и для отмены, практически, любых событий, включая setTimeout, анимацию или нажатие на кнопку

const abortController = new AbortController();

button.addEventListener(
  'click',
  () => console.log('clicked'),
  { signal: abortController.signal }
);

abortController.abort();

Иногда это удобней, чем делать отписку-подписку.

#js #tip

👍31

901 views18:06

Vue-FAQ

// useUserService.ts

function isAuthenticated() {
  return !!user.value;
}

// Component A

<script>
const { isAuthenticated } = useUserService();
</script>

<template>
  <p v-if="isAuthenticated()">hello</p>
</template>

Функции во Vue ведут себя не совсем как функции

В данном примере функция isAuthenticated() ведет себя как computed и будет вызываться каждый раз, когда user изменится или компонент А будет перерисовываться.

Происходит это из-за того, что Vue определяет все реактивные зависимости внутри тела функции и перерендивает компонент, когда кто-то из них меняется.

Таким образом, большой разницы в использовании функции вместо computed нет. Но если внутри большая логика, то лучше использовать computed, потому что он будет пересчитываться только когда его зависимости изменились, а функция - при любом рендеринге

#reactivity #tip #optimization

❤10💩3👍2😁2👎1🌚1

866 views08:39

Vue-FAQ

0:45

This media is not supported in your browser

VIEW IN TELEGRAM

Лучше жить в деревне с утками,
Чем в столице - с проститутками (с)

#offtop #video

❤16🤡7👍4😁4💩4🤔3😎2👎1🌚1💯1

999 views12:57

Vue-FAQ

Еще одна UI библиотека на Vue 3 от нашего соотечественника для ознакомления

proxima-vue

В альфа версии, но кода много

#ui #lib

proxima.wiki

UI Component Library for Vue 3 and Nuxt

👍9

861 views08:35

Vue-FAQ

Что-то захотелось редактируемый профиль пользователя на странице сделать через html contenteditable

Потратил кучу времени, что-то получилось, но в итоге переделал на input

Очень неудобно, особенно с системой байндинга и реактивности Vue
Не делайте так.

#html

✍5👎2

850 views14:39

А где вы черпаете вдохновение для своих пет-проектов?

#offtop

👍8🆒5🤩2😍2

912 views17:17

Vue-FAQ

Проверьте качество кода своего сайта

https://frontenddogma.com/tools/check/

#tool

Frontenddogma

Site Check (Website Test) · Frontend Dogma

👍7

963 views09:03

Vue-FAQ

Options API - это FSD
Composition API с composables - модульная архитектура.
(аналогия)

FSD в основу иерархичного разбиения ставит программный функционал. Модульная - доменные сущности

Можно провести аналогию c физиологией человека

Можно изучать человека разбивая его на руки, ноги, тело, голову и внутри уже по органам, тканям и т.д.

FSD же на верхнем уровне разбивает сперва по органам и тканям - кровеносная система, ЖКТ, мышечные ткани, и внутри уже разбивает по доменам - рот и кишечник внутри ЖКТ

Так же и с переходом от Options API к Composition API. Было разбиение по фичам (options), стало - по бизнес / доменным сущностям (композициям).

Так лучше.

#fsd #architecture

👍6🔥2💩1💯1

830 viewsedited 07:17

Vue-FAQ

Про Container size queries уже все знают. но про Container style queries еще далеко не все

Целью их является стилизация элементов в зависимости от контекста родительского контейнера.

Они позволяют создавать правила, которые применяются только при выполнении определенных условий относительно стиля контейнера.

Это дает возможность создавать более адаптивные и контекстно-зависимые стили и стилизовать компоненты в зависимости от их окружения.

.card {
  /* ...стили для карточки... */
}

@container style(--background-color: #333) {
  .card {
    /* Стили для карточки, когда у ее родителя темный фон */
    color: white; 
  }
}

В планах поддержка проверки функцией style() не только CSS custom properties, но и простых - style(color: green).

Caniuse везде, кроме Firefox

#css

🔥32❤2💩2👍1

1.04K viewsedited 07:16

Vue-FAQ

Вчера пришла в голову мысль пересмотреть "Малхолланд Драйв", а сегодня умер Дэвид Линч

#offtop #kino

😢11

811 views19:01

Vue-FAQ

Сколько фронтендеров (включая вас) работает на вашем текущем (последнем) Vue проекте?

Anonymous Poll

345 voters842 views05:17

Vue-FAQ

Для Linux:

"count:sfc": "find . -type f -name '*.vue' ! -path '*/node_modules/*' | wc -l"

Для Windows:

"count:sfc": "Get-ChildItem -Recurse -Include *.vue -Exclude '*/node_modules/*' | Measure-Object -Line"

Добавьте в скрипты своего package.json.

Считает число компонент в проекте.

#tip

👍11

826 views07:02

Vue-FAQ

Теперь попробуем посчитать среднюю компонентную нагрузку на одного vue-разработчика

Возмите суммарное число компонент на ваших активных проектах и поделите на число фронтенд-разработчиков на них, включая вас

Anonymous Poll

🥴9👍1

170 voters905 views12:14

Vue-FAQ

Сравнение бесплатных web версий Gemini 1.5, Grok и Copilot на одном запросе. Gemini 2.0-flash тоже с axios начала.

Давно заметил, что у Gemini часто на голову выше других по качеству ответы. Хоть Google и корпорация зла.

Ai можно эффективно использовать как инструмент для обучения. Но тема обучения должна быть достаточно хорошо изучена, с устоявшимися "лучшими практиками"

#ai #learning

👍5🤡1

918 views08:42

Немного визуальной эзотерики в праздник

#offtop #video

👍1

838 views07:46

Vue-FAQ

Написал vite-plugin-json-md

Заменяет в JSON/JSON5 файлах markdown на сконвертированный HTML

Удобен при i18n (интернационализации), когда текст перевода лежит в json файлах, но иногда бывает на странице сложное форматирование и разбивать по ключам очень хаотично. Можно записать тогда через markdown.

Обрабатывает как инлайн вставки markdown, так и ссылки на внешние md файлы

#lib #i18n #markdown

npm

npm: vite-plugin-json-md

Vite plugin for processing markdown in JSON files. Latest version: 0.7.2, last published: 3 months ago. Start using vite-plugin-json-md in your project by running `npm i vite-plugin-json-md`. There is 1 other project in the npm registry using vite-plugin…

❤‍🔥9👍3

819 views08:58

About

Blog

Apps

Platform