Vue3过滤器详解

一、Vue3的过滤器基本使用

Vue.js 3.x 已经移除了过滤器相关的 API ，所以需要自己定义过滤器，并注册到全局或局部组件上。

//定义并注册一个用于过滤日期的过滤器
const app = Vue.createApp({})
app.config.globalProperties.$filters = {
  formatDate(val) {
    if (!val) return ''
    const date = new Date(val)
    const year = date.getFullYear()
    const month = (date.getMonth() + 1).toString().padStart(2, 0)
    const day = date.getDay().toString().padStart(2, 0)
    return `${year}-${month}-${day}`
  }
}
//在组件中使用过滤器
{{ date | formatDate }}

Vue3的过滤器使用需要全局注册，也可以在组件中的setup函数里注册。

import { createApp } from 'vue'
const app = createApp({})
app.config.globalProperties.$filters = {
  //过滤器定义...
}
const component = {
  setup(){
    app.config.globalProperties.$filters = {
      //组件内的过滤器定义...
    }
  }
}

二、过滤器链

Vue3中，对于多个过滤器连续使用的情况，需要使用管道符号“|”连接。

{{ message | capitalize | reverse }}

可以在应用全局注册自定义过滤器，也可以在组件或者模块中使用 filter 选项注册自定义过滤器。

app.component('my-component', {
  filters: {
    capitalize(value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

三、过滤器函数中使用参数

过滤器函数可以接受参数，参数可以在 Vue 模板语法中使用双括号表示或者使用 v-bind 指令绑定。在过滤器函数中，参数按顺序传递，且第一个参数肯定是文本。

{{text | filter(arg1,arg2,arg3)}}

下面是一个将文本按照指定长度进行截取的过滤器的示例代码：

app.config.globalProperties.$filters = {
  truncate (text, length, clamp) {
    clamp = clamp || '...'
    length = length || 30
    if (text.length <= length) return text
    var tcText = text.slice(0, length - clamp.length)
    var last = tcText.length - 1
    while (last > 0 && tcText[last] !== ' ' && tcText[last] !== clamp[0]) last -= 1
    last = last || length - clamp.length
    tcText = tcText.slice(0, last)
    return tcText + clamp
  }
}

四、自定义过滤器

Vue3 允许我们定义自己的过滤器，可以在全局范围内或单个组件内定义。下面是自定义Vue3过滤器的简单代码示例：

app.component('my-component', {
  filters: {
    // 定义一个名为 `capitalize` 的过滤器
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

自定义指令可以通过 $options.filters 或者 Vue.filter 方法进行定义。Vue.filter 方法可以用于在全局范围内注册过滤器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

五、过滤器模块化

为了避免全局对象的污染，允许将过滤器抽出并放置在单独的模块。假设有一个过滤器模块：

// filters.js 模块
export default {
  capitalize (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  },
  // ...
}

可以在全局范围下，通过定义 globalProperties 为一个包含自定义的模块的对象来实现模块化：

import filters from './filters.js'

const app = Vue.createApp({})
app.config.globalProperties = {
  $filters: filters
}

当然也可以根据需要把模块化的过滤器放到特定的组件中：

// my-component.js 组件
import filters from './filters.js'

app.component('my-component', {
  filters: filters
})

六、总结

Vue3的过滤器虽然在多个版本后被移除，但仍然是非常实用的一项功能。Vue过滤器功能结合管道符号，可以为前端开发人员提供便利，帮助他们更容易地处理文本、数据等。自定义过滤器和过滤器的模块化，更是为Vue应用的功能和可维护性提供了无限的扩展性。