6 полезных паттернов во Vue
Будем честны, чтение документации — не то, что любят разработчики в своей профессии. А зря, ведь при работе с современным фронтендом, а в особенности современными фреймворками, такими как Vue, React и т. д, которые постоянно развиваются, многие вещи могут меняться с каждым новым релизом. И вы, возможно, пропустили некоторые из новых и блестящих возможностей, которые были предоставлены после того, как вы впервые познакомились с фреймворком и прочитали документацию. Давайте посмотрим на очень интересные, но не популярные фичи.
Напомню, все предоставленные паттерны ниже являются частью официальной документации к Vue.
1. Управление состоянием загрузки
В больших приложениях часто может понадобиться разделить приложение на более мелкие компоненты и загружать их с сервера только тогда, когда это необходимо. Чтобы упростить это, Vue позволяет определить ваш компонент как фабрику, которая асинхронно загружает компонент. Vue будет триггерить фабрику только в тех случаях, когда компонент нуждается в отрисовке, а так же будет кэшировать результат для будущих ререндеров.
Новым в версии 2.3 является то, что фабрика асинхронных компонентов может возвращать объект следующего формата:
const AsyncComponent = () => ({
// Загружаемый компонент (должен быть Promise)
component: import('./MyComponent.vue'),
// Компонент, используемый во время загрузки необходимого
loading: LoadingComponent,
// Данный компонент отображается в том случае, если загрузка завершилась ошибкой
error: ErrorComponent,
// Задержка перед отображением loading компонента. По умолчанию 200мс.
delay: 200,
// Компонент error будет отображен, если таймаут существует и превышен. По умолчанию отсутствует.
timeout: 3000
})
При таком подходе у вас есть дополнительные опции состояния загрузки и ошибок, задержки при загрузке компонентов и тайм-аута.
2. «Дешёвые» статические компоненты с помощью v-once
Рендеринг простых HTML-элементов очень быстр во Vue, но иногда у вас может быть компонент, который содержит большое количество статического контента. В этих случаях вы можете убедиться, что он вычисляется только один раз, а затем кэшируется, добавив директиву v-once к корневому элементу.
Пример кода:
Vue.component('terms-of-service', {
template:
<div v-once>
<h1>Правила использования</h1>
... огромное полотно статического контента ...
</div>
})
3. Рекурсия в компонентах
Компоненты могут рекурсивно вызывать себя в своём собственном шаблоне. Единственное НО, они могут сделать это только, если имеют параметр name.
Если не быть осторожным, рекурсивные компоненты также могут привести к бесконечным циклам:
name: 'stack-overflow',
template: '<div><stack-overflow></stack-overflow></div>'
Компонент из примера выше, приведет к ошибке «Max stack size exceeded», поэтому убедитесь, что рекурсивный вызов является условным (т. е. использует v-if, который в конечном счёте окажется в значении false)
4. Динамические аргументы директивы.
Аргументы директивы могут быть динамическими. Например, в v-mydirective:[аргумент]="значение", аргумент может быть обновлен на основе свойств данных в нашем экземпляре компонента! Это делает наши пользовательские директивы гибкими для использования во всем нашем приложении.
Вот директива, где динамический аргумент может быть обновлен для каждого экземпляра компонента:
<div id="dynamicexample">
<h3>Scroll down inside this section ↓</h3>
<p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>
Vue.directive('pin', {
bind: function (el, binding, vnode) {
el.style.position = 'fixed'
var s = (binding.arg == 'left' ? 'left' : 'top')
el.style[s] = binding.value + 'px'
}
})
new Vue({
el: '#dynamicexample',
data: function () {
return {
direction: 'left'
}
}
})
5. События и модификаторы клавиш
Для .passive, .capture, .once Vue предлагает префиксы, которые могут быть использованы с on:
Пример:
on: {
'!click': this.doThisInCapturingMode,
'keyup': this.doThisOnce,
'!mouseover': this.doThisOnceInCapturingMode
}
Для всех остальных событий и модификаторов клавиш не требуются префиксы, так как в обработчике можно использовать методы событий:
6. Внедрение зависимостей (Provide/Inject)
Есть несколько способов заставить два компонента общаться в Vue с преимуществами и недостатками в каждом из них. Новый способ, введенный в версию 2.2 — это использование внедрения зависимостей с помощью Provide/Inject.
Эта пара опций используется вместе, чтобы позволить компоненту-предку передавать данные для всех его потомков, независимо от того, насколько глубока иерархия компонентов, до тех пор, пока они находятся в одной и той же родительской цепи. Если вы знакомы с React, но это очень похоже на фичу React Context.
Пример:
// родитель передает 'foo'
const Provider = {
provide: {
foo: 'bar'
},
// ...
}
// дочерний компонент получает 'foo'
const Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}
Заключение
Всегда быть в курсе событий – это тяжело и требует времени. Лучший способ делать это – следить за оффициальным аккаунтом Vue в твиттере, читать оффициальные релизы версий и отслеживать публикации по Vue на профильных ресурсах, таких как мой канал @life_verstka.
Кроме того, сейчас вышел Vue 3 с массой новых функций, с которыми вы, возможно, захотите ознакомиться перед миграцией ваших проектов.
