Скоро начинается ViteConf 2024

https://viteconf.org/live

Спасибо @starkovsky за ссылочку

Работа с картинками в шаблоне
!src #help

1. Почему такой код не работает? Картинка точно есть по этому, и без переменной работает!

<img :src="`../assets/images/${image}`" />

Собранное приложение в проде имеет другие файлы по другим путям. Путь относительно исходников - некорректный. Чтобы это работало, нужно работать с картинками и другими ресурсами, как с модулями, прогоняя их через сборщик. Сборщик переместит файл, поменяет имя, и вернёт новое имя, а может даже вставит inline-ссылкой (data url).

import Cat from '../images/Cat.png' console.log(Cat) // выведет /img/Cat.45df63.png

<img :src="Cat" />

2. Но у меня раньше работало без импорта! Например, так:

<img src="@/assets/images/cat.png" />

Сборщик с @vue/sfc\-compiler знает, что в src в HTML и url() в CSS указывается путь. Если он относительный (не с /), то он автоматически работает с ним, как с модулем, сам делая импорт. Но это должен быть статический путь именно в таком атрибуте. :src с привязкой у JS вычислению или даже data\-src — работать не будут.

<img :src="`@/assets/images/cat.png`" data\-src="@/assets/images/cat.png" /> <img src="@/assets/images/dog.png" data\-src="@/assets/images/dog.png" /> Превращается в <img src="@/assets/cat.653gtd.png" data\-src="@/assets/images/cat.png" /> <img src="/assets/dog.45df63.png" data\-src="@/assets/images/dog.png" />

Только чистый src обработался, как путь до модуля.

3. Что же тогда делать, если надо хранить путь в данных?

Можно использовать:
- Явные импорты, если заранее известен набор файлов
- require в Webpack
- new URL в Vite (без поддержки алиасов и SSR)
- import.glob в Vite, если нужен список всех файлов

```
// Нам нужна картинка питомца из переменной
const myPet = 'dog'

// Webpack + Vite - прямой импорт
import cat from '@/assets/pets/cat.png'
import dog from '@/assets/pets/dog.png'
const pets = { cat, dog }
const myPetImage = pets[myPet]

// Webpack - require
const myPetImage = require(../assets/pets/${myPet}.png)

// Vite - new URL
const myPetImage = new URL(../assets/pets/${myPet}.png, import.meta.url).href

// Vite - import.glob
const petImages = import.meta.glob('../assets/pets/*.png', { eager: true })
const myPetImage = petImages[../assets/pets/${myPet}.png]
```

4. Но как работают все эти функции, если тут путь тоже вычисляется только в рантайме, а нужен ещё на этапе сборки?

Сборщик забирает шаблонную строку или конкатенацию строк. Затем считает, что вы можете импортировать в рантайме ЛЮБОЙ файл, подходящий под шаблон. В примерах выше сборщик найдёт все файлы .png в директории /assets/pets/.

Более сложные JS выражения не будут работать.

new URL(getPetImageByName(myPet)) // ***❌*** Не сработает

Подробности:
- https://vitejs.dev/guide/assets.html
- https://vitejs.dev/guide/features.html#glob-import
- https://webpack.js.org/guides/asset-management/#loading-images
- https://github.com/vitejs/vite/issues/10597

Vue 3.5: появился отдельный API для работы с cleanup-функциями в watch/watchEffect - onWatcherCleanup:

- позволяет зарегистрировать функцию “очищения”, которая будет вызываться прямо перед повторным запуском watch/watchEffect (например, если изменилась зависимость и он вот-вот сработает);

- подходит для того, чтобы, например, отменять асинхронные запросы (избегая гонки состояний) или очищать старые таймеры перед запуском новых;

- сильно облегчает работу в паре с watch: сейчас функция onCleanup передается в него третьим аргументом (после value и oldValue), что довольно неудобно, особенно, если первые 2 аргумента не нужны, поэтому раньше приходилось писать (_, __, onCleanup);

- имеет те же ограничения, что и остальные функции, привязанные к контексту выполнения - должен выполняться синхронно и вызываться внутри watch/watchEffect;

- дополнительно имеет второй аргумент failSilently, куда можно передать true, чтобы не получать предупреждение в консоли, если функция вызвана за пределами watch/watchEffect, что открывает окно для следующих паттернов:

```

export function request() {
const controller = new AbortController();

// регистрируем cleanup-функцию и передаем failSilently: true
onWatcherCleanup(() => controller.abort(), true);

return fetch(…, { signal: controller.signal });
}

```

либо можно воспользоваться еще одной новой функцией getCurrentWatcher и переписать код выше иначе:

```

export function request() {
const controller = new AbortController();

// если мы внутри вотчера
if (getCurrentWatcher()) {
// то регистрирурем cleanup-функцию
onWatcherCleanup(() => controller.abort());
}

return fetch(…, { signal: controller.signal });
}

```

тогда cleanup-функция будет зарегистрирована только в том случае, если мы находимся внутри watch/watchEffect.

Использование:

```

watchEffect(async () => {
const response = await request(…);
});
```

Новый подраздел в документации: https://vuejs.org/guide/essentials/watchers.html#side-effect-cleanup

PR: https://github.com/vuejs/core/pull/9927

#vue_3_5 #changelog

Vue 3.5.0-alpha.3: появился useTemplateRef(key) для Template Ref
#vue_3_5 #changelog

Позволяет описывать свойства для Template Ref аналогично ref(). Отличия:
- Семантически понятнее - явно определяется как переменная для template ref
- readonly - нельзя случайно изменить вручную
- Значение атрибута ref - определяемый отдельно ключ, а не имя переменной (свойства компонента)
- Возможно, будет особая поддержка в IDE ?

```

```

- Commit: https://github.com/vuejs/core/commit/3ba70e49b5856c53611c314d4855d679a546a7df

GitHub

feat: useTemplateRef() · vuejs/core@3ba70e4

***🖖*** Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web. - feat: useTemplateRef() · vuejs/core@3ba70e4

Vue 3.5 alpha.1 - Reactive Props Destructure
#vue_3_5 #changelog

Начали выходить alpha и beta версии нового Vue ?

Первое обновление - Reactive Props Destructure теперь доступен без экспериментального флага. Позволяет более красиво описывать значения по умолчанию в SFC Setup + TS.

RFC был спорный и долго горячо обсуждался. При компиляции обращение к переменой превращается в обращение к полю объекта.

Обсуждался ещё с 3.2 и был ранее добавлен под экспериментальным флагом в 3.3.

```

```

- RFC: https://github.com/vuejs/rfcs/discussions/502

Документация Vue наконец получила долгожданный обновленный перевод на русский язык, который теперь доступен по ссылке ниже, а также в шапке основной англоязычной версии в блоке переводов:

https://ru.vuejs.org/

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

Переведены все основные разделы, но в документации все еще есть ошибки и неточности, например, на странице “Component v-model” описана работа функции toValue.

Если вы встретили ошибку/опечатку/неточность, о которой еще не написано в issues - можно создать его, либо исправить самому, прислав Pull Request.

Спасибо всем, кто помогал и принимал участие в переводе!

ru.vuejs.org

Vue.js

Vue.js - The Progressive JavaScript Framework

Ого какая новость пролетела мимо:
Vue опять нехило импрувнули перф реактивности (в этот раз поменяли структуры данных используемые внутри системы реактивности на манер сигналов Preact)

Это дало перф:
- на ~56% уменьшено потребление памяти системой реактивности ?
- случай когда 1 реф вызыввает несколько эффектов (+118%-185% прирост производительности)
- чтение множества invalidated computed-ов (+176%+244% прирост производительности)

Дополнительно:
- Обнова обещает никак не афектить поведение и вся реализация прячется лишь в @vue/reactivity
- Закрывает некоторые специфичные баги/корнер-кейсы для системы реактивности
- Компьютеды стали гораздо дешевле и теперь еще более ленивые
- теперь если компьютед не имеет подписчиков на него то он сбрасывает все свои зависимости
- компьютед теперь в целом не может иметь зависимостей если от него никто не зависит
- Противный варнинг из 3.4.19 о грязных компьютедах удален!
- Обещают что сборка мусора в режиме SSR будет работать лучше (как это будет аффектить в реальности пока неизвестно)

Для любителей копаться в тонкостях:
- Больше никакого ручного счедуллинга:
- pauseScheduling, pauseTracking, resetScheduling больше недоступны (впрочем они и не были задокументированной возможностью)
- теперь зависимости в deps это не Map/Set а самостоятельная структура Dep с версионированием и на базе двусвязанного списка
- код стал читаться как-то проще :D
- еще не копался на в Dev режиме включили какой-то трекинг по типу действия сигнала и как его трекают

Обновление попало в минорную ветку, так что пока неизвестно когда оно попадет в наши приложения. Однако остается только порадоваться, как много сил было вложено в последнее время в повышение перфа во Vue за последние месяцы

GitHub

Refactor reactivity system to use version counting and doubly-linked list tracking by yyx990803 · Pull Request #10397 · vuejs/core

This PR refactors the core reactivity system to use version counting and a doubly-linked list data structure inspired by Preact signals. It brings some improvements and solves some issues around co...