Кстати, Vue 1 и petite-vue не использовали/не используют Virtual DOM

petite-vue - альтернативный сильно урезанный вариант Vue (занимает 6Kb), предоставляющий тот же синтаксис шаблонов и модель реактивности, что и стандартный Vue, но специально оптимизированый для "внедрения" небольшого количества интерактивности на существующую HTML-страницу, полученную с сервера.

#petitvue #virtualdom

Где лучше всего в компоненте обращаться за данными на backend API - в теле script setup, или в хуке жизненного цикла onMounted?

В onMounted.

Потому что:

1. Нельзя просто так использовать await в корне сетапа, это требует наличия Suspense и делает компонент асинхронным и ненужно усложняет приложение. Поэтому приходится использовать промисный then или IIFE , что может нарушить общий code style, хуже читается и менее удобно.

2. Если в запросе будет непойманная ошибка, то в script setup её не обработать, в отличие от хука.

3. С точки зрения системного дизайна, script setup - это конструктор компонента. Запрашивать в нем данные из внешних источников нелогично.

4. Были неоднократные свидетельства, что сетевой запрос в script setup не работал правильно, а при переносе в onMounted - работал. Зависит от контекста, но тем не менее.

Источник: vue-faq

#tip #api #hooks #scriptsetup #mounted

Две версии происхождения порта 5173 у Vite dev сервера:

1. SITE
2. VITE (с V = римская "5")

#vite

Vite обогнал по числу GitHub звезд Webpack

Сравнение данной популярности различных JS сборщиков

#vite #webpack #bundler

Если вы хотите у некоторых страниц сделать свой title (и meta description), то это органично делается через routes и router navigation guard безо всяких useHead-ов

export const routes = [{
  name: 'about',
  path: '/about',
  meta: {
    title: 'My name is Bond',
    description: 'James Bond',
  }
}];

router.beforeEach((to) => {
  const { title, description } = to.meta;

  document.title = title || 'Default Title';

  document
    .querySelector('head meta[name="description"]')
    .setAttribute('content', description || 'Default Description')
})

#router #tip

Еще один пример функциональности современного CSS

Мы уже рассказывали, как избежать дерганий экрана из-за появляющегося/исчезающего скроллбара при открытии модального окна. Вот еще один вариант по условию влиять на глобальные свойства через :has()

#css #tip

С Пасхой!

Афинский суд оправдал журналиста, который утверждал, что раскрыл тайну схождения Благодатного огня.

Как сообщает греческий портал avgi.gr, журналист Димитрис Аликакос в 2019 написал книгу о Благодатном огне, которую Иерусалимский Патриархат назвал богохульством.

Причиной иска стали материалы, включённые Аликакосом в его книгу и видеосюжет, из которых следовало, что церемония схождения Благодатного огня в Храме Гроба Господня является не чудом, а результатом человеческого вмешательства.

В 2018 году Димитрис Аликакос поехал в Иерусалим, чтобы исследовать ритуал схождения Благодатного огня. Он взял интервью у нескольких священников, в том числе у отвечающего за ритуальные предметы храма Гроба Господня архиепископа Исидора.

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

Суд постановил, что спорное видео соответствует действительности. В отношении журналиста вынесен оправдательный приговор.

#event #offtop

Сравнение пяти вариантов транспорта для связи фронта с бэкендом

#api #websockets #rest #sse #webrtc

С утра на PHP распарсиваю HTML для нового пет-проекта

Настроение:

#pet #php #video

В подтверждение нашему недавнему совету по оптимизации js кода, твит Эвана:

Самое приятное в этом то, что вы можете писать хороший функциональный код, который выполняет итерации над коллекциями (аналогично map, filter и т.д.) с оптимизированной вручную производительностью.

Каждый раз, когда я использую map/filter в JS вместо обычных циклов for, мне кажется, что я добровольно отказываюсь от производительности.

#tip #optimization #evanyou

Относительно неплохой список технологий и практик современного фронтенда
https://roadmap.sh/frontend

Роадмап по Vue.js у них не очень

#frontend #roadmap

Если попытаться использовать vue-router в js/ts модуле или composable функции,

import { useRouter } from "vue-router";

function foo() {
    const router = useRouter();
}

то выходит ошибка:

[Vue warn]: inject() can only be used inside setup() or functional components.

Это потому, что vue-router, Pinia, PrimeVue.Toast и многие другие библиотеки используют provide/inject для глобального внедрения своих элементов в ваше приложение.

// vuejs/packages/router/src/useApi.ts

export function useRouter(){
    return inject(routerKey)
}

В то же время, provide/inject во Vue работает только в контексте приложения.

Чтобы использовать vue-router в js модулях приходится создавать отдельный синглтон для router, инициализировать его через createRouter() и затем использовать обычный ES импорт где надо. Почему вместо стандартного ES экспорта/импорта сделано такое усложнение через provide/inject не совсем понятно.

Тем не менее, текст вышеуказанной ошибки не совсем корректен, потому что доступ к inject() можно получить явно выполнив код в контексте приложения:

// plugins/debug.ts
import { useRouter } from "vue-router"

export default {
    install(app) {
        app.runWithContext(() => {
            const router = useRouter();
            router.addRoute({ "/debug", () => import('@/views/DebugView.vue') });
        })
    }
}

Это удобно при создании, например, плагинов, когда доступа к своему синглтону router еще нет.

Кстати, на Хабре недавно была большая статья про контексты Vue и Nuxt

#tip #provide #router

Эван выбрался из своего Сингапура на Accel Open Source конференцию и гуляет по Сан-Франциско перед отъездом домой.

Сильно понравился нижний коммент.

#evanyou #vercel

Эта картинка на Реддите в r/vuejs за три дня набрала столько лайков, что вошла в топ 2 материалов за весь год и уже подбиралась к первому месту, как её забанили...

#meme #reddit #react #vuejs

На этих выходных Vue Mastery опять устраивает бесплатный показ своего кено.

#vuemastery #learning #video

Добавьте две фигурные скобки, чтобы сделать логирование более информативным

#tip #js

Для меня Hoppscotch вне конкуренции, но, всё-таки, сравнительная таблица инструментов для работы с web API.

#api #hoppscotch #postman

JavaScript по популярному рейтингу Tiobe обогнал Visual Basic в этом году

Tiobe просто подсчитывается количество результатов поисковых движков по каждому языку программирования.

Более объективный StackOverflow Annual Survey показывает совсем другие результаты

#lang #js

Новости искусственного интеллекта

CEO компании Bumble (онлайн приложение для знакомств типа Тиндера) рассказывает о планах по использованию в этой сфере AI.

Твой AI помощник по свиданиям будет встречаться вместо тебя с AI помощником по свиданиям другого человека и давать оценку успешности возможных реальных отношений. Как бы решая проблему 600 откликов на твою фотку.

Забавно, жутко, но не лишено смысла.

#ai #offtop

15 отличий Vue.js от React от Дениса Чернова

1) вью более предсказуемый. Он ближе к стандартам на порядок
2) vue обладает глубокой мутабельной реактивностью что в разы облегчает вход для начинающих
3) реактивность основанная на полях а не методах, что тоже более интуитивно и просто для вката
4) шаблоны имеют строгие ограничения что заставляет писать более предсказуемый флоу
5) vue это фреймворк с богатой ОФИЦИАЛЬНОЙ обвязкой, что позволяет сосредоточиться на меньшем спектре библиотек и понимать код почти любого vue проекта
6) глубокая мутабельная реактивность на основе свойств
7) слоты
8) директивы гораздо лучше решают задачи управлением флоу чем методы JS
9) HTML-совместимость (да v-for нет в самом HTML но он парсится парсером HTML и поддается обработке)
10) SFC без необходимости CSS-in-JS
11) JS-in-CSS
12) большая официальная экосистема
13) DX-ориентированность. Те если есть апишки, то они пытаются быть удобными для разработчиков
14) Экосистема растущая во вне, а не вовнутрь (мы помогаем всем - все помогают нам)
15) Хорошая расширяемость API

#vuejs #react