vue3.0实现过滤器

Vue 3.0 实现过滤器的方法

Vue 3.0 移除了内置的过滤器功能，但可以通过多种方式实现类似效果。以下是几种常见方法：

使用全局属性

在 Vue 3.0 中，可以通过 app.config.globalProperties 注册全局方法替代过滤器：

const app = createApp(App)
app.config.globalProperties.$filters = {
  capitalize(value) {
    if (!value) return ''
    return value.toString().charAt(0).toUpperCase() + value.slice(1)
  }
}

在模板中使用：

<p>{{ $filters.capitalize(message) }}</p>

使用计算属性

对于组件内特定需求，计算属性是更推荐的方式：

export default {
  data() {
    return {
      message: 'hello'
    }
  },
  computed: {
    capitalizedMessage() {
      return this.message.charAt(0).toUpperCase() + this.message.slice(1)
    }
  }
}

模板中使用：

<p>{{ capitalizedMessage }}</p>

使用组合式 API 的函数

在 setup 语法中，可以直接定义并使用函数：

import { ref } from 'vue'

export default {
  setup() {
    const message = ref('hello')
    const capitalize = (value) => {
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
    return {
      message,
      capitalize
    }
  }
}

模板中使用：

<p>{{ capitalize(message) }}</p>

使用第三方库

可以考虑使用专门为 Vue 3 设计的过滤器库，如 vue3-filter：

import { createApp } from 'vue'
import Vue3Filter from 'vue3-filter'

const app = createApp(App)
app.use(Vue3Filter)

自定义指令实现

虽然不推荐，但也可以通过自定义指令模拟过滤器行为：

app.directive('filter', {
  mounted(el, binding) {
    el.textContent = binding.value
      .split('')
      .reverse()
      .join('')
  }
})

模板中使用：

<p v-filter="message"></p>

每种方法各有优缺点，全局属性适合项目级复用，计算属性适合组件内逻辑，组合式 API 函数更灵活，第三方库可以减少开发成本。根据具体场景选择最合适的方式。