Vue 3.0 過(guò)濾器

#概覽

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

#2.x 語(yǔ)法

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

例如：

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

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

#3.x 更新

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

使用上面的例子，這里是一個(gè)如何實(shí)現(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>

#遷移策略

我們建議用計(jì)算屬性或方法代替過(guò)濾器，而不是使用過(guò)濾器。

#全局過(guò)濾器

如果在應(yīng)用中全局注冊(cè)了過(guò)濾器，那么在每個(gè)組件中用計(jì)算屬性或方法調(diào)用來(lái)替換它可能就沒(méi)那么方便了。

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

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


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

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

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

注意，這種方式只能用于方法中，不可以在計(jì)算屬性中使用，因?yàn)楹笳咧挥性趩蝹€(gè)組件的上下文中定義時(shí)才有意義。