vue3.0实现过滤器

在 Vue 3.0 中，官方移除了过滤器的支持，但可以通过多种方式实现类似功能。以下是几种常见的实现方法：

全局方法替代过滤器

通过 app.config.globalProperties 注册全局方法，在模板中直接调用：

// main.js
const app = createApp(App)
app.config.globalProperties.$filters = {
  capitalize(value) {
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

模板中使用：

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

计算属性实现

在组件内使用计算属性实现过滤逻辑：

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

组合式API实现

使用 setup 函数和 toRefs 实现响应式过滤：

import { computed, toRefs } from 'vue'

export default {
  props: ['text'],
  setup(props) {
    const { text } = toRefs(props)
    const filteredText = computed(() => {
      return text.value.toUpperCase()
    })
    return { filteredText }
  }
}

自定义指令实现

通过指令实现DOM级别的过滤：

app.directive('uppercase', (el, binding) => {
  el.textContent = binding.value.toUpperCase()
})

模板中使用：

<p v-uppercase="'hello'"></p>

使用第三方库

考虑使用专门处理文本格式的库如 lodash 或 date-fns：

import { capitalize } from 'lodash'
app.config.globalProperties.$_ = { capitalize }

以上方法均可替代Vue2中的过滤器功能，选择时需考虑具体场景和代码维护性。全局方法适合简单项目，计算属性适合组件内复用，组合式API更适合复杂逻辑，指令适合直接操作DOM的场景。