如何使用 vue3 重写 vue2 中的 filter Chain

vue2中有下面这段代码

{{ scope.row | seek('employee.createDate') | dateFmt('yyyy-MM-dd') | nil }}

相关签名

seek(ognl) => any|null
dateFmt(fmt:string) => string|null
nil (nilVal = '-') => string

vue3升级后已经移除 (在 3.x 中,过滤器已移除,且不再支持)。
官方推荐使用 Computed 代替 Filter, 这将失去 Filter 灵活多变。
我尝试着使用Computed来替换上面的逻辑,发现代码臃肿 :joy: 且重复代码较多(可能是没掌握到技巧)。在多个组件中需要编写相同逻辑,不得已使用插件方式来模拟:

{{ $pipe(() => scope.row.rukuTime).date('yyyy-MM-dd').nil() }}

pipe.d.ts

import '@vue/runtime-core'

interface IPipe {
  nil (v: any): IPipe

  date (toFmt: string, srcFmt?: string = 'yyyy-MM-dd HH:mm:ss'): IPipe

  toString (): string
}

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $pipe: (call: () => any) => IPipe
  }
}

pipe.ts

import { App } from 'vue'
import { funcs } from '@hyong8023/eztool/lib/types/funcs'
import { IPipe } from '@/plugins/pipes/pipe'
import ezt from '@hyong8023/eztool'

class Pipe<R = any> implements IPipe {
  private val: any

  constructor (private readonly call: funcs.IProducer<R>) {
    try {
      this.val = this.call()
    } catch (e) {
      ezt.logs.warn('[PIPE]', e)
      this.val = undefined
    }
  }

  toString (): string {
    return `${this.val}`
  }

  nil (val: any): Pipe {
    if (ezt.validators.isNullOrUndefined(this.val)) {
      this.val = val
    }
    return this
  }

  date (toFmt: string, srcFmt?: string): Pipe {
    if (srcFmt) {
      this.val = ezt.dates.datePoF(this.val, srcFmt, toFmt)
    } else {
      this.val = ezt.dates.dateFmt(this.val, toFmt)
    }
    return this
  }
}

export default (vm: App) => {
  vm.use((app, options) => {
    app.config.globalProperties.$pipe = (call: funcs.IProducer<any>) => new Pipe(call)
  })
}

还请答疑解惑,在此谢过!

等 ES Pipe Operator 上线了就基本能回归 Vue 2 的写法了(甚至更灵活)。但这货目前还在 Stage 2,说不准什么时候能正式进入规范,也说不准能不能进入规范,甚至说不准进了规范后还是不是现在的样子。总之 Babel 插件已经有了,如果你愿意吃螃蟹可以试试

感谢回答.
既然如此, 作者为什么还是选择再vue3中移除filter呢? 在等 ES Pipe Operator? 过度期间让开发者怎么选择?

原因见此:(最后一段)

https://v3-migration.vuejs.org/breaking-changes/filters.html#_2-x-syntax

Pipe Operator 倒不是移除 Filter 的(主要)原因。Pipe Operator 在这里属于锦上添花,有更好,没有拉倒。

替代方案也如迁移指南所说,用普通的函数调用。