Vue 3.0 過濾器

#概覽

從 Vue 3.0 開始，過濾器已刪除，不再支持。

#2.x 語法

在 2.x，開發(fā)者可以使用過濾器來處理通用文本格式。

例如：

<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>

雖然這看起來很方便，但它需要一個自定義語法，打破大括號內(nèi)表達式是“只是 JavaScript”的假設(shè)，這不僅有學(xué)習(xí)成本，而且有實現(xiàn)成本。

#3.x 更新

在 3.x 中，過濾器已刪除，不再支持。相反地，我們建議用方法調(diào)用或計算屬性替換它們。

使用上面的例子，這里是一個如何實現(xiàn)它的例子。

<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>

#遷移策略

我們建議用計算屬性或方法代替過濾器，而不是使用過濾器。

#全局過濾器

如果在應(yīng)用中全局注冊了過濾器，那么在每個組件中用計算屬性或方法調(diào)用來替換它可能就沒那么方便了。

相反地，你可以通過全局屬性在所有組件中使用它:

// main.js
const app = createApp(App)
app.config.globalProperties.$filters = {
  currencyUSD(value) {
    return '$' + value
  }
}

然后，你可以通過 $filters 對象修改所有的模板，像下面這樣：

<template>
  <h1>Bank Account Balance</h1>
  <p>{{ $filters.currencyUSD(accountBalance) }}</p>
</template>

注意，這種方式只能用于方法中，不可以在計算屬性中使用，因為后者只有在單個組件的上下文中定義時才有意義。