【VUE】过滤器Filter

前言

注意，filter在Vue3中已经删除。
本文回顾filter，并扩展内容，再引出下一篇的Computed。

---

是什么

功能：对需要显示的数据，进行一定的格式化操作后再显示

注意：filter不会修改原本的数据，而是基于原本的数据来产生新的数据。

---

使用方法

HTML中

<!-- 1 在双花括号中 -->
{{ message | capitalize }}

<!-- 2 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

<!-- 3 全局Vue也可使用，略，详见官方文档-->

详细使用

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

---

详解

这里汇总网络信息，讲解过滤器Filter从何来，又为何取消，非官方标准答案，仅供参考。

来源

过滤器filter是来源于Angular，Angular中有管道pipes有过滤器filter，使用一个管道字符( | )添加到表达式和指令中。

在Vue2中我们可以看到：{{ message | filterA | filterB }}这样的过滤器串联，原始数据message先通过filterA再通过filterB的过滤，最终变成结果数据进行展示。

实际上，filter在Vue2中充当一种“语法糖”的存在，也就是说它是Vue2中的一个“自定义语法”，来帮助我们对数据进行格式化或自定义化的处理，而也因此，引发了下文的一些列问题。

删除

众所周知，filter在Vue3中已经被删除了。
Vue3官方文档中是这样解释的：

虽然这看起来很方便，但它需要一个自定义语法，打破了大括号内的表达式“只是 JavaScript”的假设，这不仅有学习成本，而且有实现成本。

filter是有用的，这是不可否认的，但不能说它是很好用的。

首先，因为它有学习成本、实现成本。js原生中本来也没有angular中管道的概念，需要学习，另外据说ts和filter的相性不太好（未考证）。

第二，在html代码中夹杂这样的抽象逻辑代码（我的理解是：前后文都是html的view层，而这里加入了| filterA的逻辑性代码）会造成代码比较杂乱不够优雅简洁，就像在html里面写css、js一样无法让人推荐。

第三，filter归根结底，是一个数据转换的方法，并且帮助你提高代码的复用性。但实际上，绝大多数时候都可以用computed解决，也可以用method解决，也可以用独立的工具类来解决。

综上，filter并不是独一无二的不可替代的，filter这个语法糖也没有那么的甜甚至就不甜，所以Vue3中取消了。

---

参考

Vue2官方文档 过滤器
Vue3官方文档 过滤器（移除）
vue中为什么要使用filter？（知乎）
Angular JS 过滤器（菜鸟教程）
尚硅谷Vue2.0+Vue3.0

---

扩展阅读

【Vue】Vue2，Vue3 学习笔记
【Vue】初识Composition Api
【Vue】Mixin相关问题解析
【Vue】defineProperty与数据代理