Можно ли использовать несколько директив Vue на одном HTML элементе?

Несколько директив на одном элементе Vue: правила и примеры

Это технический вопрос о синтаксисе Vue. Ответ: да, можно, но нужно знать правила приоритета.

1. Простой случай: несколько директив

Это работает:

<template>
  <!-- v-for + v-if -->
  <div v-for="item in items" v-if="item.visible" :key="item.id">
    {{ item.name }}
  </div>

  <!-- v-show + v-bind -->
  <button v-show="isVisible" :class="buttonClass">
    Click me
  </button>

  <!-- v-on + v-bind -->
  <input 
    v-model="search"
    @keydown.enter="handleSearch"
    :placeholder="placeholder"
  />

  <!-- Несколько обработчиков -->
  <div
    @click="handleClick"
    @mouseover="handleMouseover"
    @mouseout="handleMouseout"
  >
    Hover over me
  </div>
</template>

Ответ: ДА, можно.

2. Приоритет выполнения директив (Vue 3)

Важно понимать, в каком порядке выполняются директивы:

<template>
  <!-- v-for выполняется ДО v-if -->
  <!-- Это НЕПРАВИЛЬНО (неэффективно) -->
  <div v-for="user in users" v-if="user.active">
    {{ user.name }}
  </div>

  <!-- Причина: v-for создаёт элементы, потом v-if их фильтрует -->
  <!-- Вместо этого лучше фильтровать в computed property -->

  <!-- ПРАВИЛЬНО -->
  <div v-for="user in activeUsers" :key="user.id">
    {{ user.name }}
  </div>
</template>

Приоритет выполнения (от первого к последнему):

1. v-for - создание элементов
2. v-if / v-show - видимость
3. v-bind - привязка атрибутов
4. v-on - обработчики событий
5. Custom директивы - пользовательские директивы

3. Практические примеры

<!-- Пример 1: Список с условной видимостью -->
<template>
  <!-- ПЛОХО - v-for + v-if вместе -->
  <li v-for="item in items" v-if="item.type === 'important'" :key="item.id">
    {{ item.text }}
  </li>

  <!-- ХОРОШО - фильтровать в computed -->
  <li v-for="item in importantItems" :key="item.id">
    {{ item.text }}
  </li>
</template>

4. Несколько v-bind и v-on

<template>
  <!-- Несколько v-on обработчиков - ОК -->
  <button
    @click="handleClick"
    @mouseenter="handleEnter"
    @mouseleave="handleLeave"
    @double-click="handleDoubleClick"
  >
    Multi-event button
  </button>

  <!-- Несколько v-bind - есть хитрость -->
  <div
    :class="buttonClass"
    :style="buttonStyle"
    :id="elementId"
  >
    Element
  </div>
</template>

5. v-model с другими директивами

<template>
  <!-- v-model + :disabled (ОК) -->
  <input
    v-model="email"
    :disabled="isLoading"
    @input="validateEmail"
    placeholder="Enter email"
  />

  <!-- v-model на компоненте + другие prop -->
  <MyInput
    v-model="value"
    :error="errorMessage"
    :required="true"
    @change="handleChange"
  />
</template>

6. Кастомные директивы + встроенные

<template>
  <!-- Встроенные + кастомные директивы -->
  <div
    v-focus
    v-click-outside="handleClickOutside"
    @click="handleClick"
    :class="activeClass"
  >
    Complex element
  </div>

  <!-- Несколько кастомных директив -->
  <div
    v-focus
    v-tooltip="Help text"
    v-ripple
    v-lazy-load
  >
    Element with multiple custom directives
  </div>
</template>

7. Проблемы и их решения

<!-- Проблема 1: v-for + v-if (неэффективно) -->
<!-- НЕПРАВИЛЬНО -->
<div v-for="item in largeList" v-if="item.visible">
  {{ item.name }}
</div>

<!-- ПРАВИЛЬНО -->
<div v-for="item in visibleItems">
  {{ item.name }}
</div>

<!-- Проблема 2: Конфликт v-model с v-bind для value -->
<!-- НЕПРАВИЛЬНО -->
<input v-model="text" :value="defaultText" />

<!-- ПРАВИЛЬНО - v-model переопределяет :value -->
<input v-model="text" />

8. Best Practices

<template>
  <!-- 1. Используй computed для фильтрации вместо v-if -->
  <div v-for="item in filteredItems">{{ item.name }}</div>

  <!-- 2. Используй v-show вместо v-if для частых переключений -->
  <div v-show="isVisible">Fast toggle</div>

  <!-- 3. Группируй события логически -->
  <button
    @click="handlePrimary"
    @keydown.enter="handleKeydown"
    @keyup.escape="handleEscape"
  />

  <!-- 4. Используй v-bind для объекта вместо множества :prop -->
  <input v-bind="inputAttrs" />

  <!-- 5. Кастомные директивы - отдельная логика -->
  <div v-permission="admin" v-tooltip="Admin only">
    Content
  </div>

  <!-- 6. Не смешивай v-for с v-if - используй computed -->
  <!-- ПЛОХО -->
  <li v-for="user in users" v-if="user.active">{{ user.name }}</li>

  <!-- ХОРОШО -->
  <li v-for="user in activeUsers">{{ user.name }}</li>
</template>

9. Ответ на интервью

Да, можно использовать несколько директив на одном элементе Vue.

Примеры:

• v-for + v-if (хотя это не рекомендуется)
• v-model + :disabled
• v-bind + @click
• Несколько @event обработчиков

Но нужно помнить:

1. Приоритет выполнения: v-for выполняется перед v-if, поэтому v-for + v-if неэффективно. Лучше использовать computed для фильтрации.

2. v-model + :value конфликт v-model переопределяет :value, не имеет смысла использовать вместе.

3. Несколько v-on событий - это нормально.

4. Несколько кастомных директив - тоже ОК.

Главное правило: используй несколько директив разумно. Если код становится сложным, лучше разделить логику.

Итог

В Vue можно использовать несколько директив на одном элементе:

• Встроенные директивы: ОК
• Несколько событий: ОК
• Кастомные директивы: ОК
• v-for + v-if: Работает, но неэффективно
• v-model + :value: Конфликт

Правило: несколько директив - это нормально, но не переусложняй код.