Что такое фильтры?vue-49

Фильтры — это специальные функции в Vue.js 2.x, предназначенные для форматирования текста в шаблонах. Они применяются с помощью синтаксиса "pipe" (|) и позволяют трансформировать данные перед отображением.

Основное назначение фильтров

Фильтры решают следующие задачи:

  • Форматирование текста (регистр, обрезка)
  • Форматирование чисел и дат
  • Локализация контента
  • Условное отображение значений

Синтаксис использования

<template>
  <div>
    {{ message | capitalize }} <!-- Применение фильтра -->
    {{ price | currency }}    <!-- Цепочка фильтров: message | filterA | filterB -->
  </div>
</template>

Создание фильтров

Глобальная регистрация

Vue.filter('capitalize', function(value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

Локальная регистрация

export default {
  filters: {
    currency(value) {
      return '$' + value.toFixed(2)
    }
  }
}

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

Форматирование даты

Vue.filter('formatDate', function(value) {
  if (!value) return ''
  return new Date(value).toLocaleDateString()
})

Сокращение длинного текста

Vue.filter('truncate', function(value, length = 30) {
  if (!value) return ''
  if (value.length <= length) return value
  return value.substring(0, length) + '...'
})

Фильтры с аргументами

{{ date | formatDate('YYYY-MM-DD') }}

Реализация:

Vue.filter('formatDate', function(value, format) {
  // Реализация форматирования по переданному формату
})

Отличия в Vue 3

В Vue 3 фильтры были удалены. Вместо них рекомендуется:

  1. Использовать методы
  2. Использовать вычисляемые свойства (computed)
  3. Использовать функции-помощники в Composition API

Альтернатива в Vue 3

<template>
  <div>{{ formatCurrency(price) }}</div>
</template>

<script>
export default {
  methods: {
    formatCurrency(value) {
      return '$' + value.toFixed(2)
    }
  }
}
</script>

Или с Composition API:

import { computed } from 'vue'

export default {
  setup() {
    const price = ref(10.5)
    const formattedPrice = computed(() => `$${price.value.toFixed(2)}`)

    return { formattedPrice }
  }
}

Когда фильтры были полезны

  1. Чистота шаблонов - перенос логики форматирования из шаблонов
  2. Повторное использование - глобальные фильтры доступны везде
  3. Читаемость - цепочки фильтров выглядели декларативно

Проблемы фильтров

  1. Сложность отладки - неявные преобразования
  2. Производительность - дополнительные вызовы функций
  3. Путаница - можно было спутать с вычисляемыми свойствами

Резюмируем

  1. Фильтры — это устаревшая в Vue 3 возможность форматирования данных в шаблонах
  2. В Vue 2 использовались через синтаксис | (pipe)
  3. Могли быть глобальными или локальными
  4. Поддерживали аргументы и цепочки вызовов
  5. В Vue 3 заменены на методы и computed-свойства
  6. Основное преимущество — чистота шаблонов
  7. Основной недостаток — неявность преобразований

Для новых проектов на Vue 3 рекомендуется использовать методы или вычисляемые свойства вместо фильтров, что делает код более явным и упрощает его поддержку.

Вопросы

Собеседования