// 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

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

#offtop #video

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

proxima-vue

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

#ui #lib

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

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

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

#html

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

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

#tool

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

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

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

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

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

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

Так лучше.

#fsd #architecture

Про 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

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

#offtop #kino

Для 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

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

#offtop #video

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

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

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

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

#lib #i18n #markdown

Infinity scroll vs. Virtual scroll


Infinity scroll

Загружается дополнительный контент по мере прокрутки страницы. Используется AJAX или аналогичные методы для подгрузки данных с сервера и добавления их в конец списка по мере достижения пользователем конца страницы.

Пользователи видят новый контент без необходимости нажимать кнопку "Загрузить еще" или переходить на другую страницу. Это обеспечивает плавный и непрерывный просмотр.

Производительность ухудшается с увеличением объема данных в DOM, поскольку все данные рендерятся одновременно.

Virtual scroll

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

Пользователи также прокручивают список, но рендерятся только видимые элементы, что значительно улучшает производительность, особенно для очень больших списков. Это снижает нагрузку на память и улучшает плавность прокрутки.

#scroll

Любители JSX и TS всё стремятся извратить SFC

vue-vine

#jsx #react #sfc

В Vite нашли и пофиксили уязвимость - чужой сайт мог обратиться на ваш dev сервер и утащить всю кодовую базу.

Attack scenario:

- The attacker serves a malicious web page (http://malicious.example.com).
- The user accesses the malicious web page.
- The attacker sends a fetch('http://127.0.0.1:5173/main.js') request by JS in that malicious web page. This request is normally blocked by same-origin policy, but that's not the case for the reasons above.
- The attacker gets the content of http://127.0.0.1:5173/main.js.

Обновление вышло сразу для трех последних мажорных версий как patch, но для некоторых может оказаться breaking change. Подробней - в релизе.

#vite #bug