Vue 3 迁移策略笔记—— 第11节：移除过滤器

编程入门行业动态更新时间:2024-10-23 18:33:09

Vue 3 迁移策略笔记—— 第11节：移除<a href=https://www.elefans.com/category/jswz/34/1771166.html style= 过滤器"/>

Vue 3 迁移策略笔记—— 第11节：移除过滤器

前言

本笔记主要基于官方文档《迁移策略—— 过滤器》汇总而来。如有理解出入，请以官方文档为主。建议您以官方文档为主，本文为辅。这样您可以“以自己为主”审视的阅读，从而不被我的观点带偏。

概述

Vue 3.x 将移除且不再支持 filters。

Vue 2.x 的 filters

在 Vue 2.x 中，我们可以借助filters来处理通用文本格式。如下：

<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"的设想，而且增加了学习成本和实现成本。不仅有学习成本，而且有实现成本。

Vue 3.x 移除 filters

在 Vue 3.x，filters将被移除且不再支持了。如果需要实现过滤功能，建议通过method或computed属性来实现。

上面的例子可改为：

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

全局过滤器

如果我们需要使用全局过滤器。那么在每个单独组件中使用method或computed属性来实现将很不便利。因此，为此，Vue 3.x 提供了globalProperties。我们可以借助globalProperties来注册全局过滤器：

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

然后这样使用：

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

注意，全局过滤器里面定义的只能是method。

Note that with this approach, you can only use methods, not computed properties, as the latter only make sense when defined in the context of an individual component.