在vue项目中什么是过滤器，vue2中的filters如何使用，vue3取消了过滤器功能替代方案是什么，如何实现

原创已于 2024-12-18 09:38:56 修改 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2024-11-02 17:02:57 首次发布

vue 专栏收录该内容

33 篇文章

订阅专栏

😉 你好呀，我是爱编程的Sherry，很高兴在这里遇见你！我是一名拥有十多年开发经验的前端工程师。这一路走来，面对困难时也曾感到迷茫，凭借不懈的努力和坚持，重新找到了前进的方向。我的人生格言是——认准方向，坚持不懈，你终将迎来辉煌！欢迎关注我😁，我将在这里分享工作中积累的经验和心得，希望我的分享能够给你带来帮助。

引言

在 Vue 2 中，过滤器（filters） 是用于对数据进行格式化的小型工具，主要用于模板表达式，方便处理文本展示时的格式化工作。过滤器不会改变原始数据，只影响数据的显示方式。

在 Vue 3 中，官方不再支持过滤器作为内置特性，那么该如何实现过滤器的功能呢？下面我们一一讲来。

过滤器的应用场景

文本格式化

如将字符串首字母大写或将全局文本转为大写。

日期格式化

如将时间戳转为易读的日期格式。

数字处理

如千分位分隔符或小数点处理。

货币格式化

将数字转为货币符号格式。

实现原理

过滤器的核心实现是在模板编译阶段将表达式通过过滤器函数进行处理。Vue 内部会解析模板中的 {{ message | filterName }}，生成对应的函数调用，并在渲染时执行这个函数来返回过滤后的值。

在 Vue 2 的源码中，过滤器主要通过 compile 函数实现，它会处理模板中的管道符，并在生成渲染函数时调用过滤器方法。

在vue2中使用过滤器

使用全局过滤器

全局过滤器可以通过 Vue.filter 方法定义，它可以在任何组件中使用：

// 注册全局过滤器
Vue.filter('capitalize', function(value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
});

然后在模板中使用：

<p>{{ message | capitalize }}</p>

局部过滤器

局部过滤器是在单个 Vue 实例或组件中定义的，它只能在该组件中使用：

new Vue({
  el: '#app',
  data: {
    message: 'hello world'
  },
  filters: {
    capitalize(value) {
      if (!value) return ''
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
});

同样可以通过管道符 | 在模板中使用：

<p>{{ message | capitalize }}</p>

在vue3中实现过滤器功能

在 Vue 3 中，过滤器功能被移除，官方建议用计算属性或方法来替代过滤器的使用场景。

使用计算属性实现过滤器

选项式API

<template>
  <div>{{ formattedDate }}</div>
</template>

<script>
import { computed } from 'vue'

export default {
  data() {
    return {
      rawDate: new Date()
    }
  },
  computed: {
    formattedDate() {
      const date = this.rawDate
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
      return Y + M + D
    }
  }
}
</script>

组合式API实现一

通过 setup 函数和响应式特性来实现类似过滤器的功能。

<template>
  <div>{{ formattedDate }}</div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    // 创建一个响应式的 rawDate 变量
    const rawDate = ref(new Date())

    // 使用 computed 创建一个依赖于 rawDate 的格式化日期
    const formattedDate = computed(() => {
      const date = rawDate.value
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
      return Y + M + D
    })

    // 返回需要在模板中使用的变量或方法
    return {
      formattedDate
    }
  }
}
</script>

组合式API实现二

在 <script setup> 模式下，你可以直接使用组合式 API 的功能，并且不需要显式地导出 setup 函数。<script setup> 是 Vue 3 中一种更简洁的语法糖，它自动将所有的声明暴露给模板。

<template>
  <div>{{ formattedDate }}</div>
</template>

<script setup>
import { ref, computed } from 'vue'

// 创建一个响应式的 rawDate 变量
const rawDate = ref(new Date())

// 定义一个辅助函数用于格式化日期
function formatDate(date) {
  const Y = date.getFullYear() + '-'
  const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
  return Y + M + D
}

// 使用 computed 创建一个依赖于 rawDate 的格式化日期
const formattedDate = computed(() => formatDate(rawDate.value))
</script>

使用方法实现过滤器

选项式API

<template>
  <div>{{ formatDate(rawDate) }}</div>
</template>

<script>
export default {
  data() {
    return {
      rawDate: new Date()
    }
  },
  methods: {
    formatDate(date) {
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
      return Y + M + D
    }
  }
}
</script>

组合式API实现一

使用 setup 函数

<template>
  <div>{{ formatDate(rawDate) }}</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    // 创建一个响应式的 rawDate 变量
    const rawDate = ref(new Date())

    // 定义方法用于格式化日期
    function formatDate(date) {
      const Y = date.getFullYear() + '-'
      const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
      return Y + M + D
    }

    // 返回需要在模板中使用的变量或方法
    return {
      rawDate,
      formatDate
    }
  }
}
</script>

组合式API实现二

使用 <script setup>

<template>
  <div>{{ formatDate(rawDate) }}</div>
</template>

<script setup>
import { ref } from 'vue'

// 创建一个响应式的 rawDate 变量
const rawDate = ref(new Date())

// 定义方法用于格式化日期
function formatDate(date) {
  const Y = date.getFullYear() + '-'
  const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
  const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate())
  return Y + M + D
}
</script>