Каковы различные способы создания фильтров?vue-51

Во Vue фильтры используются для форматирования текста или данных перед их отображением в шаблоне. Хотя во Vue 3 фильтры были удалены из ядра, их можно реализовать разными способами. Вот основные подходы:

1. Глобальные фильтры

В Vue 2 можно было регистрировать глобальные фильтры:

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

Использование в шаблоне:

<p>{{ message | capitalize }}</p>

2. Локальные фильтры

Фильтры можно было определять в компонентах:

export default {
  filters: {
    reverse(value) {
      return value.split('').reverse().join('')
    }
  }
}

3. Методы вычисляемых свойств

Более предпочтительный способ во Vue 3:

export default {
  computed: {
    formattedMessage() {
      return this.message.toUpperCase()
    }
  }
}

Использование в шаблоне:

<p>{{ formattedMessage }}</p>

4. Композиционные функции

В Vue 3 можно использовать Composition API:

import { computed } from 'vue'

export default {
  setup() {
    const message = ref('hello')
    const formattedMessage = computed(() => message.value.toUpperCase())

    return { formattedMessage }
  }
}

5. Внешние библиотеки утилит

Можно использовать библиотеки типа Lodash или date-fns:

import { capitalize } from 'lodash'
import { format } from 'date-fns'

export default {
  methods: {
    formatDate(date) {
      return format(new Date(date), 'dd.MM.yyyy')
    }
  }
}

6. Пользовательские директивы

Для сложных преобразований можно использовать директивы:

export default {
  directives: {
    highlight: {
      mounted(el) {
        el.style.backgroundColor = 'yellow'
      }
    }
  }
}

7. Функции-помощники

Создание отдельных файлов с функциями форматирования:

// helpers/filters.js
export function currency(value) {
  return new Intl.NumberFormat('ru-RU').format(value)
}

Резюмируем:

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

Вопросы

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