Vue: сборник мелких советов

Обновлено 14.01.2018: Пересмотрел свежим взглядом и внёс мелкие правки. Заходите и в Telegram-канал по Vue: https://t.me/vuejs_ru

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

Зачем указывать имя компонента

Допустим мы подключаем компонент через render-функцию. Подключаем файл, указываем его в блоке components, рендерим:

import Example from './example.vue';
new Vue ({
  components: {
    Example // сокращение от Example: Example
  },
  render: (h) => h(Example)
});

В DevTools (с расширением для Vue) будет красивое имя Example.

Но ведь указывать секцию components необязательно — можно напрямую подключать файл, который уже будет скомпилирован в render-функцию:

import Example from './example.vue';
new Vue ({
  render: (h) => h(Example)
});

Решение выглядит гораздо компактнее. А вот в DevTools компонент уже отображается как Anonymous Component. Ясности это не добавляет, можно и запутаться случайно. Чтобы с подобным не столкнуться стоит в компоненте всегда указывать name, с которым он и будет отображаться:

export default {
    name: 'Example',
    ...
};

Рекурсивный вызов компонента

Вдогонку к предыдущему. Если потребуется рекурсивно вызывать компонент, то у него обязательно должно быть установлено name. При импорте стоит называть переменную таким же именем:

import Example from './example.vue';
export default {
  name: 'Example',
  components: {
    Example
  },
  ...
};

Директива v-else-if

В версии Vue 2.1.0 добавили директиву v-else-if, что позволит уменьшить вложенность в разметке, если таковыми пользуетесь. Хотя всё же предпочтительнее выносить подобную логику из шаблона в JS.

Невидимый блок-обёртка

Если нужно обернуть часть разметки в блок, возможно с каким-то условием, и в результате в разметке его оказаться не должно — можно воспользоваться тегом template.

Отображение ошибок в консоли

Для разработки не стоит скупиться и подключать сжатую и минифицированную сборку. Vue снабжает множеством полезных предупреждений о типичных ошибках. Это может быть например проверка типов у входных данных props, или напоминание что забыли в компоненте data сделать функцией.

Это может очень выручить. Поэтому для production только сжатые и минифицированные версии (где это удалено), а для разработки только такие, со всеми проверками и сообщениями об ошибках.

Подключение сторонних vue-компонентов

Вот нашли npm-пакет с нужным вам компонентом, установили. Что дальше? Каждый такой vue-компонент может поставляться как в скомпилированном + исходном виде, так и только в исходном.

Скомпилированный вид — render-функция на чистом JS. Пару версий назад разработчики что-то немного поменяли в компиляторе, после чего такие компоненты стали выкидывать ошибку при подключении. В качестве временной меры, пока автор компонента не выпустит новую сборку, можно подключать компонент в исходном виде и собирать самому (или увидеть конкретнее что за ошибки).

Перво-наперво стоит проверить конфигурацию Webpack, в частности правило для обработки vue-файлов. Можно провести долгое время, гадая что за ошибка с компонентом, на самом деле забыв расширить область действия правила на каталог node_modules.

Во-вторых, при использовании оригинальных vue-файлов надо будет доустановить всё чем пользовался автор (будь то плагин для JSX или загрузчик для SASS). Это уже можно ориентироваться на сообщения об ошибках при сборке от Webpack.

Также может встретиться случай, когда разработчик подключает свои вложенные компоненты таким образом require(./folder/component). По умолчанию Webpack ищет только файлы с расширением .js, а вот про .vue не знает. Исправляется добавлением в конфиг Webpack’а:

resolve: {
  ...
  extensions: ['.js', '.vue'],
  ...
 },

Думаю большинство острых углов с подключением сторонних компонентов больше не будет проблемой.

Несколько секций style в vue-файле

В отличие от секций скриптов и шаблона, секций стилей может быть несколько. Это может пригодиться например при необходимости добавить часть стилей глобально, а часть с ограниченной видимостью на компонент (с помощью атрибута scoped):

<template>
  ... шаблон компонента
</template>
<script>
  ... логика компонента
</script>
<style>
  ... глобальные стили
</style>
<style scoped>
  ... стили применимые только к компоненту
</style>

Совместное использование v-for и v-if

Совсем недавно в документацию был добавлен раздел, описывающий тонкости совместного использования v-for и v-if (в русскую версию документации уже тоже добавлено). Суть в том, что при их наличии на одном элементе v-for имеет больший приоритет.

Это значит, что условие v-if будет выполняться на каждой итерации цикла. Такой подход будет работать, но использовать его не рекомендуется (лучше сделать computed, содержащую только необходимые элементы):

...
<div v-if="item.needShow" v-for="item in list">...</div>
...

Если же нужно проверять необходимость самого цикла, то v-if нужно добавлять либо к родителю, либо обернуть блок с v-for в template:

...
<template v-if="needShowList">
  <div v-for="item in list">...</div>
</template>
...

Или например так:

<div v-if="emptyList">Список не содержит элементов!</div>
<div v-else v-for="item in list">...</div>

Надеюсь что-нибудь из этой подборки сэкономит вам времени!