1. Vue过滤器基础概念与应用场景Vue过滤器是Vue.js框架中用于文本格式化的特殊功能。它们本质上是一些可复用的函数能够对数据进行特定处理后再显示。在Vue 2.x版本中过滤器被广泛应用于各种文本格式化场景虽然Vue 3.x中官方推荐使用计算属性或方法替代但理解过滤器的工作原理对于维护老项目或理解Vue的设计思想仍然很有价值。过滤器最常见的应用场景包括文本格式化如首字母大写、日期格式化数字处理如货币显示、小数位控制数据过滤如列表筛选、敏感词替换单位转换如字节大小转换、温度单位转换注意虽然Vue 3.x仍然可以通过插件方式使用过滤器但官方建议优先考虑使用计算属性或方法来实现类似功能因为这样能获得更好的类型支持和组合性。2. 过滤器的定义与注册方式2.1 局部过滤器定义局部过滤器定义在Vue组件选项中仅在该组件内可用。这种方式适合项目中使用频率不高、具有特定业务逻辑的过滤器。export default { filters: { capitalize: function(value) { if (!value) return value value.toString() return value.charAt(0).toUpperCase() value.slice(1) }, // 货币格式化过滤器 currency: function(value, symbol ¥) { return symbol parseFloat(value).toFixed(2) } } }2.2 全局过滤器定义全局过滤器通过Vue.filter()方法注册在整个应用中都可用。适合定义那些在多个组件中都会用到的通用过滤器。// 在main.js或单独的文件中定义 Vue.filter(dateFormat, function(value, format YYYY-MM-DD) { if (!value) return return moment(value).format(format) }) // 使用moment.js进行日期格式化需要先安装moment // npm install moment --save2.3 过滤器命名冲突解决当全局过滤器和局部过滤器同名时Vue会优先使用局部过滤器。这种设计允许我们在全局过滤器的基础上在特定组件中进行定制化覆盖。3. 过滤器的使用方式与高级技巧3.1 基本使用语法过滤器通过管道符(|)应用于表达式可以用于插值表达式和v-bind指令。!-- 在双花括号中 -- p{{ message | capitalize }}/p !-- 在v-bind中 -- div v-bind:idrawId | formatId/div3.2 过滤器链式调用过滤器支持链式调用前一个过滤器的输出会作为下一个过滤器的输入。{{ message | filterA | filterB }}3.3 过滤器参数传递过滤器本质上是JavaScript函数因此可以接受额外参数。{{ message | filterA(arg1, arg2) }}对应的过滤器函数定义filters: { filterA: function(value, arg1, arg2) { // value是message的值 // arg1是字符串arg1 // arg2是表达式arg2的值 } }3.4 动态过滤器实现通过计算属性返回过滤器名称可以实现动态选择过滤器的效果。computed: { currentFilter() { return this.useFilterA ? filterA : filterB } }{{ message | currentFilter }}4. 常见实用过滤器实现4.1 文本处理类过滤器// 首字母大写 Vue.filter(capitalize, function(value) { if (!value) return value value.toString() return value.charAt(0).toUpperCase() value.slice(1) }) // 截断文本并添加省略号 Vue.filter(truncate, function(value, length 30) { if (!value) return if (value.length length) return value return value.substring(0, length) ... })4.2 数字处理类过滤器// 货币格式化 Vue.filter(currency, function(value, symbol ¥, decimals 2) { const digitsRE /(\d{3})(?\d)/g value parseFloat(value) if (!isFinite(value) || (!value value ! 0)) return const stringified Math.abs(value).toFixed(decimals) const _int decimals ? stringified.slice(0, -1 - decimals) : stringified const i _int.length % 3 const head i 0 ? _int.slice(0, i) (_int.length 3 ? , : ) : const _float decimals ? stringified.slice(-1 - decimals) : const sign value 0 ? - : return sign symbol head _int.slice(i).replace(digitsRE, $1,) _float }) // 百分比显示 Vue.filter(percentage, function(value, decimals 0) { if (!value) return 0% return (value * 100).toFixed(decimals) % })4.3 日期时间类过滤器// 使用moment.js的日期格式化 Vue.filter(date, function(value, format YYYY-MM-DD) { if (!value) return return moment(value).format(format) }) // 相对时间如3天前 Vue.filter(relativeTime, function(value) { if (!value) return return moment(value).fromNow() })5. 过滤器性能优化与最佳实践5.1 过滤器与计算属性的选择虽然过滤器很方便但在以下情况考虑使用计算属性可能更合适需要进行复杂计算需要响应式更新在模板中多次使用相同转换computed: { formattedDate() { return moment(this.date).format(YYYY-MM-DD) } }5.2 避免在过滤器中修改原始数据过滤器应该是纯函数只负责数据的转换而不修改原始数据。如果需要修改数据应该使用方法或计算属性。5.3 过滤器单元测试为重要的业务过滤器编写单元测试确保其行为符合预期。import { capitalize } from /filters describe(capitalize filter, () { it(should capitalize first letter, () { expect(capitalize(hello)).toBe(Hello) expect(capitalize()).toBe() expect(capitalize(null)).toBe() expect(capitalize(undefined)).toBe() expect(capitalize(123)).toBe(123) }) })5.4 Vue 3中的过滤器替代方案在Vue 3中可以通过以下方式替代过滤器使用方法{{ formatDate(date) }}使用计算属性{{ formattedDate }}使用全局属性app.config.globalProperties.$filters { currency(value) { return $ value.toFixed(2) } }然后在模板中使用{{ $filters.currency(price) }}6. 常见问题与解决方案6.1 过滤器不生效的可能原因过滤器名称拼写错误过滤器未正确注册局部/全局在Vue 3中尝试使用过滤器而未进行兼容处理过滤器函数没有返回值6.2 过滤器中的this访问在过滤器函数中this将指向window而不是Vue实例。如果需要访问组件数据应该通过参数传递。6.3 异步过滤器处理过滤器默认是同步的如果需要异步处理可以考虑以下方案使用计算属性配合异步方法使用v-if等待数据准备好后再渲染使用插件如vue-async-filters6.4 过滤器与v-for的性能考虑在大型列表中使用复杂过滤器可能导致性能问题考虑预先处理数据使用分页使用虚拟滚动7. 实际项目中的过滤器架构设计7.1 过滤器模块化组织在大型项目中建议将过滤器分类组织src/ filters/ index.js # 主入口文件 text.js # 文本相关过滤器 number.js # 数字相关过滤器 date.js # 日期相关过滤器 custom/ # 业务特定过滤器 order.js user.js7.2 过滤器自动注册通过webpack的require.context自动注册所有过滤器// filters/index.js const requireFilter require.context( ., true, /^\.\/.\/.\.js$/ ) requireFilter.keys().forEach(fileName { const filterConfig requireFilter(fileName) const filterName fileName .replace(/^\.\//, ) .replace(/\.\w$/, ) .split(/) .pop() Vue.filter(filterName, filterConfig.default || filterConfig) })7.3 过滤器类型声明TypeScript在使用TypeScript时可以为过滤器添加类型声明// types/filters.d.ts import Vue from vue declare module vue/types/vue { interface Vue { $filters: { currency(value: number, symbol?: string): string date(value: Date | string, format?: string): string } } }8. 从Vue 2过滤器迁移到Vue 3的方案8.1 使用全局Properties// main.js const app createApp(App) app.config.globalProperties.$filters { capitalize(value) { if (!value) return value value.toString() return value.charAt(0).toUpperCase() value.slice(1) } }8.2 使用Composition API// useFilters.js import { computed } from vue export function useFilters() { const capitalize (value) { if (!value) return value value.toString() return value.charAt(0).toUpperCase() value.slice(1) } return { capitalize } }8.3 使用插件系统// filters-plugin.js export default { install(app) { app.config.globalProperties.$filters { currency(value) { return $ value.toFixed(2) } } } } // main.js import filtersPlugin from ./filters-plugin const app createApp(App) app.use(filtersPlugin)在实际项目中迁移时建议逐步替换过滤器使用而不是一次性全部修改。可以先从简单的过滤器开始逐步过渡到计算属性或方法。 
长河君 · 2026/10/30 3:03:00 · 阅读 1.2k Vue过滤器详解：从基础到高级应用
1. Vue过滤器基础概念与应用场景Vue过滤器是Vue.js框架中用于文本格式化的特殊功能。它们本质上是一些可复用的函数能够对数据进行特定处理后再显示。在Vue 2.x版本中过滤器被广泛应用于各种文本格式化场景虽然Vue 3.x中官方推荐使用计算属性或方法替代但理解过滤器的工作原理对于维护老项目或理解Vue的设计思想仍然很有价值。过滤器最常见的应用场景包括文本格式化如首字母大写、日期格式化数字处理如货币显示、小数位控制数据过滤如列表筛选、敏感词替换单位转换如字节大小转换、温度单位转换注意虽然Vue 3.x仍然可以通过插件方式使用过滤器但官方建议优先考虑使用计算属性或方法来实现类似功能因为这样能获得更好的类型支持和组合性。2. 过滤器的定义与注册方式2.1 局部过滤器定义局部过滤器定义在Vue组件选项中仅在该组件内可用。这种方式适合项目中使用频率不高、具有特定业务逻辑的过滤器。export default { filters: { capitalize: function(value) { if (!value) return value value.toString() return value.charAt(0).toUpperCase() value.slice(1) }, // 货币格式化过滤器 currency: function(value, symbol ¥) { return symbol parseFloat(value).toFixed(2) } } }2.2 全局过滤器定义全局过滤器通过Vue.filter()方法注册在整个应用中都可用。适合定义那些在多个组件中都会用到的通用过滤器。// 在main.js或单独的文件中定义 Vue.filter(dateFormat, function(value, format YYYY-MM-DD) { if (!value) return return moment(value).format(format) }) // 使用moment.js进行日期格式化需要先安装moment // npm install moment --save2.3 过滤器命名冲突解决当全局过滤器和局部过滤器同名时Vue会优先使用局部过滤器。这种设计允许我们在全局过滤器的基础上在特定组件中进行定制化覆盖。3. 过滤器的使用方式与高级技巧3.1 基本使用语法过滤器通过管道符(|)应用于表达式可以用于插值表达式和v-bind指令。!-- 在双花括号中 -- p{{ message | capitalize }}/p !-- 在v-bind中 -- div v-bind:idrawId | formatId/div3.2 过滤器链式调用过滤器支持链式调用前一个过滤器的输出会作为下一个过滤器的输入。{{ message | filterA | filterB }}3.3 过滤器参数传递过滤器本质上是JavaScript函数因此可以接受额外参数。{{ message | filterA(arg1, arg2) }}对应的过滤器函数定义filters: { filterA: function(value, arg1, arg2) { // value是message的值 // arg1是字符串arg1 // arg2是表达式arg2的值 } }3.4 动态过滤器实现通过计算属性返回过滤器名称可以实现动态选择过滤器的效果。computed: { currentFilter() { return this.useFilterA ? filterA : filterB } }{{ message | currentFilter }}4. 常见实用过滤器实现4.1 文本处理类过滤器// 首字母大写 Vue.filter(capitalize, function(value) { if (!value) return value value.toString() return value.charAt(0).toUpperCase() value.slice(1) }) // 截断文本并添加省略号 Vue.filter(truncate, function(value, length 30) { if (!value) return if (value.length length) return value return value.substring(0, length) ... })4.2 数字处理类过滤器// 货币格式化 Vue.filter(currency, function(value, symbol ¥, decimals 2) { const digitsRE /(\d{3})(?\d)/g value parseFloat(value) if (!isFinite(value) || (!value value ! 0)) return const stringified Math.abs(value).toFixed(decimals) const _int decimals ? stringified.slice(0, -1 - decimals) : stringified const i _int.length % 3 const head i 0 ? _int.slice(0, i) (_int.length 3 ? , : ) : const _float decimals ? stringified.slice(-1 - decimals) : const sign value 0 ? - : return sign symbol head _int.slice(i).replace(digitsRE, $1,) _float }) // 百分比显示 Vue.filter(percentage, function(value, decimals 0) { if (!value) return 0% return (value * 100).toFixed(decimals) % })4.3 日期时间类过滤器// 使用moment.js的日期格式化 Vue.filter(date, function(value, format YYYY-MM-DD) { if (!value) return return moment(value).format(format) }) // 相对时间如3天前 Vue.filter(relativeTime, function(value) { if (!value) return return moment(value).fromNow() })5. 过滤器性能优化与最佳实践5.1 过滤器与计算属性的选择虽然过滤器很方便但在以下情况考虑使用计算属性可能更合适需要进行复杂计算需要响应式更新在模板中多次使用相同转换computed: { formattedDate() { return moment(this.date).format(YYYY-MM-DD) } }5.2 避免在过滤器中修改原始数据过滤器应该是纯函数只负责数据的转换而不修改原始数据。如果需要修改数据应该使用方法或计算属性。5.3 过滤器单元测试为重要的业务过滤器编写单元测试确保其行为符合预期。import { capitalize } from /filters describe(capitalize filter, () { it(should capitalize first letter, () { expect(capitalize(hello)).toBe(Hello) expect(capitalize()).toBe() expect(capitalize(null)).toBe() expect(capitalize(undefined)).toBe() expect(capitalize(123)).toBe(123) }) })5.4 Vue 3中的过滤器替代方案在Vue 3中可以通过以下方式替代过滤器使用方法{{ formatDate(date) }}使用计算属性{{ formattedDate }}使用全局属性app.config.globalProperties.$filters { currency(value) { return $ value.toFixed(2) } }然后在模板中使用{{ $filters.currency(price) }}6. 常见问题与解决方案6.1 过滤器不生效的可能原因过滤器名称拼写错误过滤器未正确注册局部/全局在Vue 3中尝试使用过滤器而未进行兼容处理过滤器函数没有返回值6.2 过滤器中的this访问在过滤器函数中this将指向window而不是Vue实例。如果需要访问组件数据应该通过参数传递。6.3 异步过滤器处理过滤器默认是同步的如果需要异步处理可以考虑以下方案使用计算属性配合异步方法使用v-if等待数据准备好后再渲染使用插件如vue-async-filters6.4 过滤器与v-for的性能考虑在大型列表中使用复杂过滤器可能导致性能问题考虑预先处理数据使用分页使用虚拟滚动7. 实际项目中的过滤器架构设计7.1 过滤器模块化组织在大型项目中建议将过滤器分类组织src/ filters/ index.js # 主入口文件 text.js # 文本相关过滤器 number.js # 数字相关过滤器 date.js # 日期相关过滤器 custom/ # 业务特定过滤器 order.js user.js7.2 过滤器自动注册通过webpack的require.context自动注册所有过滤器// filters/index.js const requireFilter require.context( ., true, /^\.\/.\/.\.js$/ ) requireFilter.keys().forEach(fileName { const filterConfig requireFilter(fileName) const filterName fileName .replace(/^\.\//, ) .replace(/\.\w$/, ) .split(/) .pop() Vue.filter(filterName, filterConfig.default || filterConfig) })7.3 过滤器类型声明TypeScript在使用TypeScript时可以为过滤器添加类型声明// types/filters.d.ts import Vue from vue declare module vue/types/vue { interface Vue { $filters: { currency(value: number, symbol?: string): string date(value: Date | string, format?: string): string } } }8. 从Vue 2过滤器迁移到Vue 3的方案8.1 使用全局Properties// main.js const app createApp(App) app.config.globalProperties.$filters { capitalize(value) { if (!value) return value value.toString() return value.charAt(0).toUpperCase() value.slice(1) } }8.2 使用Composition API// useFilters.js import { computed } from vue export function useFilters() { const capitalize (value) { if (!value) return value value.toString() return value.charAt(0).toUpperCase() value.slice(1) } return { capitalize } }8.3 使用插件系统// filters-plugin.js export default { install(app) { app.config.globalProperties.$filters { currency(value) { return $ value.toFixed(2) } } } } // main.js import filtersPlugin from ./filters-plugin const app createApp(App) app.use(filtersPlugin)在实际项目中迁移时建议逐步替换过滤器使用而不是一次性全部修改。可以先从简单的过滤器开始逐步过渡到计算属性或方法。