Vue.js

# Удалены фильтры
удалено

# Обзор

Фильтры были удалены из Vue 3.x и больше не поддерживаются.

# Синтаксис в 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Хоть это и кажется удобным, но требует дополнительного синтаксиса, который нарушает ожидания, что выражения внутри фигурных скобок это «обычный 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# Стратегия миграции

Использование фильтров заменить на вычисляемые свойства или вызовы методов.

Флаги сборки для миграции:

  • FILTERS
  • COMPILER_FILTERS

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

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

Можно сделать такие фильтры доступными для всех компонентов через globalProperties:




 



 

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

app.config.globalProperties.$filters = {
  currencyUSD(value) {
    return '$' + value
  }
}
1
2
3
4
5
6
7
8

В таком случае потребуется исправить все шаблоны на использование объекта $filters:



 


<template>
  <h1>Остаток на банковском счёте</h1>
  <p>{{ $filters.currencyUSD(accountBalance) }}</p>
</template>
1
2
3
4

Однако при таком подходе можно использовать только методы, но не вычисляемые свойства, поскольку они имеют смысл лишь тогда, когда определены в контексте отдельного компонента.

← Добавлены фрагменты →