Методы управления отображением компонентов Vue
Управление тем, какую HTML-разметку и/или компоненты отображать на странице зависимости от значений в модели данных в приложении — задача, решаемая разными способами. Сегодня мы посмотрим, какие из них доступны в фронтенд-приложениях, написанных на VueJS.
Подобная функциональность одна из базовых в любом приложении — начиная с простой замены текста на кнопке, заканчивая заменой целых фрагментов HTML-разметки и страницы целиком.
Использование Virtual DOM позволяет сделать процесс максимально эффективным с точки зрения скорости рендеринга HTML. Возможно, многие из вас подумают о роутере, как об одном из подходов. Но к нему мы подойдём чуть позже, начнём с более простых вариантов.
1. Встроенная директива v-if/v-else-if
https://ru.vuejs.org/v2/guide/conditional.html
Директива v-if используется для рендеринга блока по условию. Блок будет отображаться только в том случае, если выражение директивы возвращает значение, приводимое к true. Как следует из названия, v-else-if служит в качестве блока «else if» для директивы v-if. Можно объединять эти директивы в длинные цепочки:
<section v-if="showComponent=='foo'"> <Foo/> </section> <section v-else-if="showComponent=='bar'"> <Bar/> </section> <section v-else-if=”showComponent=='bazz'"> <Bazz/> </section>
Обратите внимание, что при использовании директивы v-if компоненты будут полностью врезаться из DOM. Если вы хотите, чтобы они сохранялись в DOM-дереве, можно использовать v-show, правда, в этом случае нет удобства при использовании нескольких значений.
2. Динамические компоненты
В примере currentTabComponent может содержать: — имя зарегистрированного компонента, — объект с настройками компонента.
<component v-bind:is="currentTabComponent"></component>
При таком синтаксисе будет происходить пересоздание динамических компонентов. Но если мы хотим, чтобы экземпляры компонентов вкладок кэшировались после их создания, то в первый раз мы можем обернуть наш динамический компонент в элемент
<keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>
Полезно обратить внимание, что для использования этого синтаксиса есть определённые ограничения. Например, некоторые HTML-элементы (
3. Vue-router
Роутер, безусловно, является решением для замены страницы целиком или отдельных её частей. Роутер для wi-fi является частью экосистемы, отлично поддерживается и хорошо задокументирован. Однако мы не будем уделять ему много времени в этой заметке, так как всегда можно посмотреть на официальную документацию.
Мы же лучше давайте взглянем на альтернативы стандартному роутеру — это проекты, разработанные энтузиастами, которым чего-то не хватало в стандартной поставке роутера.
4. React style router
Декларативный роутер, который позволяет описывать структуру роутов и компонентов в стиле React.
<HistoryRouter> <div> <Route path="/foo"> <Foo/> </Route> <Route path="/bar/:id"> <Bar/> </Route> </div> </HistoryRouter>
5. Децентрализованное описание роутов — tidyroutes
Этот подход позволяет не писать одно огромное дерево всех роутов. Этот конфиг действительно может разрастись в сложном приложении, а описывать каждый роут по месту декларации новой страницы или нового компонента.
// foo.js import VueTidyRoutes from 'vue-tidyroutes'; const Component1 = { data() { }, props: [‘id’] template: '<div><h2>Component1</h2></div>' }; VueTidyRoutes.route('/component1/id', { name: 'component1', component: Component1, props: true }); export default Component1;
И далее подключаем всё в месте инициализации приложения.
// main.js import VueTidyRoutes from 'vue-tidyroutes'; Vue.use(VueRouter) const router = new VueRouter({ routes: VueTidyRoutes.export() })
Надеюсь, вам понравился этот обзор! Напишите, какими способами управления отображением компонентов в Vue пользуетесь вы.
