Заспорил тут в Твиттере с создателем FormKit Justin Schroeder, который с чего-то призвал отказаться от использования ref в пользу reactive

На аргумент о ShallowRef он привел ShallowReactive, и стало интересно, как сильно они отличаются

В итоге получился вот такой бенчмарк на Stackblitz по замеру времени изменения разных массивов

ShallowRef не использует JavaScript Proxy, отсюда такая эффективность

С одной стороны, ужасно, как Proxy уронил общую производительность в JS

С другой, еще раз стало очевидно, что писать программы на Vue надо с умом. Необходимо полностью контролировать модель и потоки данных. Именно поэтому доверять таким библиотекам, как VueUse и Tanstack, это, как минимум, торговать производительностью и архитектурой.

#optimization #benchmark

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

Время от времени можно удалять локальный npm/yarn/ pnpm кэш, чтобы освободить место на диске от устаревших версий пакетов.

#npm #pnpm #optimization

Датацентры всего мира производят 3.7% мирового CO2 (carbon footprint, углекислый газ)

Каждый показ вашего сайта является причиной выделения CO2 - в среднем 0.8 грамм.

Замерьте карбоновый след вашего сайта

Еще одна причина писать эффективные PWA

#pwa #optimization