Vue3에서 Filters 필터를 지원하지 않는 문제

Filters 필터가 Vue 3.0에서 제거되어 더 이상 지원되지 않습니다.
2.x 구문
에서x에서 개발자는 일반적인 텍스트 형식을 처리하기 위해 필터를 사용할 수 있습니다.

<template>
 <h1>Bank Account Balance</h1>
 <p>{{ accountBalance | currencyUSD }}</p>
</template>
<script>
 export default {
  props: {
   accountBalance: {
    type: Number,
    required: true
   }
  },
  filters: {
   currencyUSD(value) {
    return '$' + value
   }
  }
 }
</script>

이것은 보기에는 매우 편리해 보이지만, 대괄호 내 표현식인'그냥 자바스크립트'의 원칙을 깨뜨리는 사용자 정의 문법이 필요하다. 이것은 학습 원가를 증가시킬 뿐만 아니라 논리를 실현하는 원가도 증가시킨다.
3.x 업데이트
있다x에서 필터가 삭제되어 더 이상 지원되지 않습니다.반대로, 우리는 방법으로 그것들을 호출하거나 계산하여 대체할 것을 건의합니다.
아래의 예는 유사한 기능을 실현하는 것이다.

<template>
 <h1>Bank Account Balance</h1>
 <p>{{ accountInUSD }}</p>
</template>

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

정부는 필터를 사용하지 않고 속성이나 방법을 계산하는 것을 권장한다.
Vue3가 Filters 필터를 지원하지 않는 문제에 관한 이 글은 여기에 소개되었습니다. 더 많은 Vue3 Filters 필터 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보시기 바랍니다. 앞으로 많은 응원 부탁드립니다!