粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

需要调研 vue 2 到 vue 3 的迁移方案，来做内部分享。

我看网上貌似目前只有一人翻译了，翻译了前几章。

但是我着急用，只能自己翻了。译者四级没过，全靠有道和谷歌了。

vue 3 官方文档原文—— filters

概览

Vue 3.0 中移除了过滤器，不再支持

2.x 语法

在 2.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>

尽管这似乎很方便，但是它需要一种自定义语法，该语法打破了花括号内的表达式只是“ JavaScript”的假设，这既有学习成本，也有实现成本。

3.x 更新

在 3.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>

迁移策略

作为过滤器的替代，我们建议使用计算属性或方法来代替它们。