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

最新推荐文章于 2024-10-18 11:31:54 发布

杰~JIE

最新推荐文章于 2024-10-18 11:31:54 发布

阅读量2.4k

点赞数

分类专栏： Vue 3 迁移策略笔记文章标签： Vue 3 过滤器

本文链接：https://blog.csdn.net/weixin_44869002/article/details/113174778

版权

Vue 3 迁移策略笔记专栏收录该内容

32 篇文章 62 订阅

订阅专栏

前言

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

概述

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.