vue filter过滤器

很久没有更新，先聊一聊近况吧，5月底从上家公司离职了（任职时长两个多月），然后休息了几天入职了现在这家公司，离职的原因有很多，我也犹豫很久才做出的决定，但是后来想通释怀了。目前的工作也稍微上手了点，项目开发和管理也很规范，在这里沉淀一段时间，应该能够让自己收获一些以前缺失的。但不管环境如何变好变坏，只有坚定向前的步伐才是唯一正确的路。

最近在看项目代码的时候，看到table渲染中出现这样的写法

<template>
  {{ row.create_time | formatDate }}
</template>

我以前没有用过这种写法，但从上下文得知row.create_time应该是参数，formatDate是函数，于是我找了一下关键词formatDate，看到vue的配置项里面有这样一段内容

filters: {
  formatDate(time) {
    // 转换时间戳
    time = time * 1000
    const date = new Date(time)
    //省略几行
    return date
  }
}

看到这个filters我就想起来，曾在vue的官方文档里面有看到过滤器的相关介绍，感觉这种写法很整洁规范，便仔细看了文档的内容。

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

所以，出了上面叙述的插值表达式写法，还可以用在v-bind指令上

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

除此之外，filters过滤器还可以串联。filterA接收的参数是message，filterB接收的参数是过滤器filterB的返回值，过滤两层。（被这种排火车的写法戳中萌点...）

{{ message | filterA | filterB }}

最后，过滤器作为JavaScript函数，还可以接收出了过滤对象之外的其他参数。

{{ message | filterA('arg1', arg2) }}

在上述表达式中，filterA将接收三个参数，第一个是message，普通字符串'arg1'作为第二个参数，表达式arg2的值作为第三个参数。