Що таке фільтри у Vue.js? – Огляд цікавого

У Vue.js 2 фільтри (filters) використовувалися для форматування виводу даних у шаблонах (template). Вони дозволяли змінювати вигляд значень перед їхнім відображенням у HTML, наприклад, форматувати текст, дати або числа.

Однак у Vue 3 фільтри були видалені, оскільки вони ускладнювали налагодження коду та дублювали функціональність, яку можна реалізувати за допомогою обчислюваних властивостей (computed) або методів (methods).

Фільтри у Vue 2 (застарілий підхід)

Фільтри оголошувалися у секції filters у компоненті та застосовувалися у шаблоні через символ | (пайп).

Приклад фільтра у Vue 2:

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

<script>
export default {
  data() {
    return {
      message: "привіт, світе!",
    };
  },
  filters: {
    capitalize(value) {
      if (!value) return "";
      return value.charAt(0).toUpperCase() + value.slice(1);
    },
  },
};
</script>

☝ Як працює?
Фільтр capitalize бере значення message, змінює першу літеру на велику і повертає оновлений текст.

Чому фільтри були видалені у Vue 3?

Неуніверсальність – фільтри працювали лише у шаблоні, але не в обчислюваних (computed) або методах (methods).
Обмежена налагоджуваність – у складних випадках важко було відстежувати логіку фільтрів.
Дублювання функцій – все, що робили фільтри, можна реалізувати через computed або methods.

Альтернативи фільтрам у Vue 3

1. Використання `computed`

Найкращий спосіб обробки значень перед їхнім виведенням.

<template>
  <p>{{ capitalizedMessage }}</p>
</template>

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

const message = ref("привіт, світе!");

const capitalizedMessage = computed(() => {
  return message.value.charAt(0).toUpperCase() + message.value.slice(1);
});
</script>

☝ Перевага: computed кешує значення і виконується лише при зміні message.

2. Використання `methods`

Якщо форматування має бути гнучким, варто використовувати методи.

<template>
  <p>{{ capitalize(message) }}</p>
</template>

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

const message = ref("привіт, світе!");

const capitalize = (text) => {
  return text.charAt(0).toUpperCase() + text.slice(1);
};
</script>

☝ Перевага: метод можна використовувати в різних місцях.

Висновок

📌 Vue 2: Фільтри (filters) використовувалися для простого форматування даних у шаблонах.
📌 Vue 3: Фільтри були видалені, і їх замінили computed та methods, які є більш потужними та гнучкими.

Рекомендується уникати старих фільтрів і використовувати обчислювані властивості (computed) або методи (methods) для обробки та форматування даних.