Как объединить фильтры в цепочку?vue-50

Цепочка фильтров — это последовательное применение нескольких фильтров к одному значению в шаблоне Vue.js (актуально для Vue 2.x). Каждый фильтр получает результат предыдущего фильтра как входное значение.

Базовый синтаксис цепочки фильтров

<template>
  <div>
    {{ message | filterA | filterB | filterC }}
  </div>
</template>

Как работает цепочка фильтров

  1. Первый фильтр (filterA) получает исходное значение message
  2. Второй фильтр (filterB) получает результат filterA
  3. Третий фильтр (filterC) получает результат filterB
  4. Конечный результат отображается в шаблоне

Практический пример

Определим несколько фильтров

Vue.filter('uppercase', function(value) {
  if (!value) return ''
  return value.toString().toUpperCase()
})

Vue.filter('reverse', function(value) {
  if (!value) return ''
  return value.toString().split('').reverse().join('')
})

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

Применение в цепочке

<template>
  <div>
    <!-- Применяем 3 фильтра последовательно -->
    {{ text | uppercase | reverse | limit(15) }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'Hello Vue Filters'
    }
  }
}
</script>

Результат преобразований:

  1. Исходный текст: "Hello Vue Filters"
  2. После uppercase: "HELLO VUE FILTERS"
  3. После reverse: "SRETLIF EUV OLLEH"
  4. После limit(15): "SRETLIF EUV OL..."

Передача аргументов в цепочке фильтров

Каждый фильтр в цепочке может получать свои аргументы:

{{ price | currency('USD') | padEnd(10) }}

Реализация фильтров:

Vue.filter('currency', function(value, symbol = '$') {
  return symbol + value.toFixed(2)
})

Vue.filter('padEnd', function(value, length) {
  return value.toString().padEnd(length, ' ')
})

Особенности работы цепочек

  1. Порядок важен - фильтры применяются слева направо
  2. Обработка ошибок - если один фильтр вернет null, следующий получит null
  3. Производительность - каждый фильтр создает новую строку
  4. Читаемость - длинные цепочки ухудшают понимание кода

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

Во Vue 3 фильтры удалены, но можно использовать методы или вычисляемые свойства:

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

<script>
export default {
  methods: {
    formatPrice(value) {
      return this.padEnd(this.currency(value, 'USD'), 10)
    },
    currency(value, symbol) {
      return symbol + value.toFixed(2)
    },
    padEnd(value, length) {
      return value.toString().padEnd(length, ' ')
    }
  }
}
</script>

Или с Composition API:

import { computed } from 'vue'

export default {
  setup() {
    const price = ref(15.99)

    const formattedPrice = computed(() => {
      const withCurrency = `$${price.value.toFixed(2)}`
      return withCurrency.padEnd(10, ' ')
    })

    return { formattedPrice }
  }
}

Резюмируем

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

Цепочки фильтров — это удобный способ организации потока данных в шаблоне, но важно соблюдать баланс между удобством и поддержкой кода.

Вопросы

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