Skip to content

Полезные советы

Какие есть хорошие библиотеки для работы с ...?

Карусель или слайдер

Keen-Slider, Embla Carousel, Splide

Хорошо известный Swiper не очень подходит для Vue.js

Дата и время

day.js, day-fnc.js

Известный moment.js безвозвратно устарел.

TIP

Современный JavaScript - это гораздо больше, чем было 10 лет назад. В 95% случаев для операций с датой достаточно возможностей стандартного пакета JavaScript Intl

Как поймать момент когда пользователь доскролил до определенного места или сделать virtual scroll?

Intersection Observer

i18n - интернационализация приложения

NPM библиотека для интернационализации и локализации i18n очень популярна, однако за последние годы она сильно располнела. В ней много возможностей для локализации дат, чисел, установки нужных склонений, поддержки RTL языков, загрузки локалей с сервера и кучи еще чего. На сайте i18next она называется уже даже "интернационализационным фреймворком".

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

По сути обычно нужна реактивная функция, по ключу и текущей локали возвращающая строку.

Вариант реализации через композабл - в этой статье

Ваш бандл "похудеет" на 50Кб.

Options API или Composition API?

Советуется Composition API (script setup) как более логичный и удобный, в котором программист контролирует поток выполнения программы средствами JavaScript, а не просто задает какие-то магические опции.

Ref или Reactive?

Отличие в плане использования - Reactive работает только с объектами и не отслеживает замену объекта. Ref работает со всем и отслеживает замену переменной:

js
const a = Ref(1);
const b = Reactive({ x: 1 });

// is OK
a.value = 2;

// is NOT OK
b = { x: 2 };

Реализации реактивных переменных в Vue 2 и Vue 3 отличаются. Во Vue 2 была своя (фреймворка) реализация отслеживания изменений. Во Vue 3 для этого используется объект Proxy, введенный в ES6. Из-за поддержки данного функционала на уровне языка (JavaScript engine), соответствующий код фреймворка получается эффективней и проще.

Reactive непосредственно использует Proxy объект.

Ref на объекте использует напрямую Reactive для отслеживания изменения внутри объекта, и создает и хранит массив зависимостей переменной для примитивов и объектов в случае их замены.

Если хотите претенциозной эффективности - используйте на объектах Reactive, на примитивах - Ref. В ином случае можно все делать через Ref.

ShallowRef

Когда у вас массив с большим количеством элементов, но данные внутри элементов массива не меняются, а может меняться только сам массив (добавление элементов, удаление, замена массива) - используйте ShallowRef.

Он работает как Ref, но не отслеживает изменения внутри элементов массива, что дает значительное улучшение производительности.

Миксины

Нужно забыть о них как о страшном сне. Миксины как паттерн множественного наследования являются очень плохой архитектурной практикой и должны быть избегаемы. Во Vue 2 в самом фреймворке не было возможности сделать для компонент общей часть стейта и методов, поэтому использовались миксины. Во Vue 3 появилось Composition API и миксины стали не нужны.

Pug и Stylus

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

Chrome DevTools custom formatters

Google Chrome и некоторые основанные на Chromium браузеры имеют настройку в DevTools в разделе настроек Console - "Enable custom formatters". После её включения реактивные объекты будут показываться в консоли и в попап-ах при дебаге в более читаемом виде:

image

вместо стандартного:

image

Временно отключить программно настройку можно так:

js
const old = window.devtoolsFormatters;
delete window.devtoolsFormatters;
// will print out data without custom formatting
console.log(obj);
window.devtoolsFormatters = old;