Как реализуешь Flatten Object JSКак реализуешь Flatten Object JS?

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

Краткий ответ

Да, можно. В Vue можно применить несколько директив к одному элементу, и они будут работать вместе. Однако есть некоторые нюансы, которые нужно понимать, чтобы правильно комбинировать директивы и избежать конфликтов.

Базовые примеры

<!-- Несколько базовых директив на одном элементе -->
<template>
  <!-- v-if и v-show на одном элементе (обычно не требуется) -->
  <div v-if="isVisible" v-show="isShowing">Content</div>

  <!-- v-for и v-if (правильный порядок: v-for имеет приоритет) -->
  <li v-for="item in items" v-if="item.active" :key="item.id">
    {{ item.name }}
  </li>

  <!-- v-model и другие директивы -->
  <input
    v-model="userName"
    v-focus
    type="text"
    placeholder="Enter your name"
  />

  <!-- v-bind и v-on на одном элементе -->
  <button
    v-bind:disabled="isLoading"
    v-on:click="handleSubmit"
    class="btn"
  >
    {{ isLoading ? 'Loading...' : 'Submit' }}
  </button>
</template>

Порядок выполнения директив

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

<script setup>
import { ref } from 'vue';

const items = ref([
  { id: 1, name: 'Item 1', active: true },
  { id: 2, name: 'Item 2', active: false },
  { id: 3, name: 'Item 3', active: true },
]);
</script>

<template>
  <!-- НЕПРАВИЛЬНО: v-if на элементе v-for
       v-if будет проверять каждый элемент, что хорошо,
       но лучше фильтровать на уровне JavaScript -->
  <ul>
    <li v-for="item in items" v-if="item.active" :key="item.id">
      {{ item.name }}
    </li>
  </ul>

  <!-- ПРАВИЛЬНО: фильтруем в computed property -->
  <ul>
    <li v-for="item in activeItems" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script setup>
const activeItems = computed(() => items.value.filter(i => i.active));
</script>

Практические примеры с несколькими директивами

<!-- Пример 1: Динамический класс + обработчик события + v-show -->
<template>
  <button
    v-show="isVisible"
    :class="{ 'btn-active': isActive, 'btn-disabled': isDisabled }"
    @click="toggleActive"
    @mouseover="onHover"
    :disabled="isDisabled"
  >
    Click me
  </button>
</template>

<!-- Пример 2: Form с несколькими директивами -->
<template>
  <form
    v-if="isFormVisible"
    @submit.prevent="submitForm"
    @keyup.enter="handleEnter"
  >
    <!-- Input с v-model + динамическими атрибутами -->
    <input
      v-model="formData.email"
      :placeholder="emailPlaceholder"
      :disabled="isSubmitting"
      :aria-label="'Email input'"
      @blur="validateEmail"
      @focus="clearError"
      type="email"
    />

    <!-- v-for + условная отрисовка ошибок -->
    <div v-if="errors.length" class="error-list">
      <p v-for="error in errors" :key="error.id" class="error">
        {{ error.message }}
      </p>
    </div>

    <!-- Кнопка с несколькими директивами -->
    <button
      v-bind:disabled="!isFormValid || isSubmitting"
      :class="{ 'is-loading': isSubmitting }"
      @click="submitForm"
      type="submit"
    >
      {{ isSubmitting ? 'Submitting...' : 'Submit' }}
    </button>
  </form>
</template>

<script setup>
import { ref, computed } from 'vue';

const formData = ref({ email: '' });
const errors = ref([]);
const isSubmitting = ref(false);

const isFormValid = computed(() => {
  return formData.value.email && errors.value.length === 0;
});

const validateEmail = () => {
  errors.value = [];
  if (!formData.value.email.includes('@')) {
    errors.value.push({ id: 1, message: 'Invalid email format' });
  }
};

const clearError = () => {
  errors.value = [];
};

const submitForm = async () => {
  isSubmitting.value = true;
  // Отправка данных
  isSubmitting.value = false;
};
</script>

Пример 3: Кастомные директивы с встроенными

// Кастомная директива для focus
const vFocus = {
  mounted(el) {
    el.focus();
  },
};

const vHighlight = {
  mounted(el) {
    el.style.backgroundColor = 'yellow';
  },
};

<template>
  <!-- Несколько кастомных директив + встроенные -->
  <input
    v-focus
    v-highlight
    v-model="searchText"
    @input="handleSearch"
    @keyup.escape="clearSearch"
    :placeholder="'Search...'"
    :disabled="isSearchDisabled"
  />
</template>

Модификаторы директив

Модификаторы также можно комбинировать:

<template>
  <!-- v-on с несколькими модификаторами -->
  <input
    v-model.trim.lazy="userName"
    @keyup.enter="submit"
    @keydown.prevent.tab="handleTab"
  />

  <!-- v-bind с динамическими значениями -->
  <button
    v-on:click.prevent.stop="handleClick"
    :disabled="!isReady"
    :aria-disabled="!isReady"
  >
    Click
  </button>

  <!-- v-for с v-bind и v-on -->
  <div
    v-for="(item, index) in items"
    :key="item.id"
    :class="{ active: item.active }"
    @click="selectItem(index)"
  >
    {{ item.name }}
  </div>
</template>

Антипаттерны: чего избегать

<!-- ПЛОХО: v-if и v-for на одном элементе -->
<!-- Это работает, но неэффективно -->
<li v-for="item in allItems" v-if="item.show">
  {{ item.name }}
</li>

<!-- ХОРОШО: фильтруй данные в JavaScript -->
<li v-for="item in visibleItems">
  {{ item.name }}
</li>

<!-- ПЛОХО: конфликтующие модификаторы -->
<button @click.once="init" @click="handleClick">
  <!-- .once выполнится один раз, но handleClick всегда -->
</button>

<!-- ХОРОШО: используй флаг -->
<button @click="handleClickOnce">
  Click
</button>

<script setup>
let initialized = false;

const handleClickOnce = () => {
  if (!initialized) {
    init();
    initialized = true;
  }
  handleClick();
};
</script>

Сложный пример: Компонент с множеством директив

<template>
  <div class="user-card">
    <!-- Главный контейнер с v-show и динамическим классом -->
    <div
      v-show="isCardVisible"
      :class="{ 'card-loading': isLoading }"
      class="card-content"
    >
      <!-- Заголовок с условной отрисовкой -->
      <h2 v-if="user" class="card-title">
        {{ user.name }}
      </h2>

      <!-- Список с v-for и вложенными директивами -->
      <ul v-if="user && user.tags.length" class="tags-list">
        <li
          v-for="tag in user.tags"
          :key="tag"
          :class="{ highlighted: selectedTag === tag }"
          @click="selectedTag = tag"
        >
          {{ tag }}
        </li>
      </ul>

      <!-- Интерактивная кнопка с несколькими обработчиками -->
      <button
        v-bind:disabled="isLoading || !user"
        :aria-label="`Contact ${user?.name}`"
        @click="openContactForm"
        @mouseover="showTooltip = true"
        @mouseout="showTooltip = false"
        :title="tooltipText"
      >
        Contact {{ user?.name }}
      </button>
    </div>

    <!-- Скрытый элемент с v-if -->
    <div v-if="showTooltip" class="tooltip">
      {{ tooltipText }}
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

const user = ref(null);
const isLoading = ref(false);
const isCardVisible = ref(true);
const showTooltip = ref(false);
const selectedTag = ref(null);

const tooltipText = computed(() => `Click to contact ${user.value?.name}`);

const openContactForm = () => {
  console.log('Opening contact form for', user.value?.name);
};
</script>

Итоговые рекомендации

1. Да, можно комбинировать директивы — Vue поддерживает несколько директив на одном элементе
2. Порядок не критичен — Vue автоматически обрабатывает порядок выполнения
3. Думай о производительности — комбинируй v-for с v-if осторожно, лучше фильтруй в JavaScript
4. Комбинируй модификаторы разумно — например .prevent.stop для событий
5. Используй computed properties — для сложной логики вместо прямых комбинаций директив

Практический совет: сложные комбинации директив часто указывают на то, что нужно вынести логику в отдельный метод или computed property для улучшения читаемости кода.