Фільтри

видалено

Огляд

Фільтри видалено з версії Vue 3.0 і вони більше не підтримуються.

2.x Синтаксис

У версії 2.x розробники могли використовувати фільтри для застосування загального форматування тексту.

Наприклад:

<template>
  <h1>Баланс на банківському рахунку</h1>
  <p>{{ accountBalance | currencyUSD }}</p>
</template>

<script>
  export default {
    props: {
      accountBalance: {
        type: Number,
        required: true
      }
    },
    filters: {
      currencyUSD(value) {
        return '$' + value
      }
    }
  }
</script>

Хоча це здається зручнішим, це вимагає спеціального синтаксису, який порушує припущення, що вирази у фігурних дужках є "просто JavaScript", бо вимагає витрат на вивчення та реалізацію.

3.x Оновлення

У версії 3.x фільтри вилучено і більше не підтримуються. Натомість ми рекомендуємо замінити їх викликами методів або обчислюваними властивостями.

Використовуючи наведений вище приклад, ось один з варіантів, як це може бути реалізовано.

<template>
  <h1>Баланс на банківському рахунку</h1>
  <p>{{ accountInUSD }}</p>
</template>

<script>
  export default {
    props: {
      accountBalance: {
        type: Number,
        required: true
      }
    },
    computed: {
      accountInUSD() {
        return '$' + this.accountBalance
      }
    }
  }
</script>

Стратегія міграції

Замість того, щоб використовувати фільтри, ми рекомендуємо замінити їх обчислювальними властивостями або методами.

Стяги збірки міграції:

• FILTERS
• COMPILER_FILTERS

Глобальні фільтри

Якщо ви використовуєте фільтри, які були зареєстровані глобально, а потім використовувалися в усьому вашому додатку, ймовірно, буде незручно замінити їх обчислювальними властивостями або методами в кожному окремому компоненті.

Замість цього ви можете зробити ваші глобальні фільтри доступними для всіх компонентів за допомогою globalProperties:

// main.js
const app = createApp(App)

app.config.globalProperties.$filters = {
  currencyUSD(value) {
    return '$' + value
  }
}

Потім ви можете виправити всі шаблони за допомогою цього об'єкта $filters ось так:

<template>
  <h1>Баланс на банківському рахунку</h1>
  <p>{{ $filters.currencyUSD(accountBalance) }}</p>
</template>

Зауважте, що при такому підході ви можете використовувати лише методи, а не обчислювані властивості, оскільки останні мають сенс лише тоді, коли оголошені в контексті окремого компонента.