🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》
引言
在Vue中，过滤器是一种特殊的函数，用于格式化文本。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式。过滤器应该被添加在JavaScript表达式的尾部，由管道符 | 指示。Vue允许我们定义全局过滤器和局部过滤器，以复用文本格式化的逻辑。本文将介绍全局过滤器与局部过滤器的概念、使用方法和区别。
全局过滤器
全局过滤器是在Vue实例之外定义的，它们可以在任何新创建的Vue实例中使用。
定义全局过滤器
可以通过 Vue.filter 方法定义一个全局过滤器。
示例
// 定义一个全局过滤器
Vue.filter('capitalize', function (value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
});
// 创建Vue实例
new Vue({
el: '#app',
data: {
message: 'hello'
}
});
在HTML模板中使用：
<div id="app">
{{ message | capitalize }}
</div>
输出结果将是：Hello
局部过滤器
局部过滤器是在Vue实例或组件内部定义的，它们只能在该实例或组件内使用。
定义局部过滤器
可以在组件的选项中定义一个 filters 对象来注册局部过滤器。
示例
// 创建Vue实例，并定义局部过滤器
new Vue({
el: '#app',
data: {
message: 'hello'
},
filters: {
capitalize(value) {
if (!value) return '';
value = value.toString();
return value.charAt(0).toUpperCase() + value.slice(1);
}
}
});
在HTML模板中的使用方式与全局过滤器相同。
全局与局部过滤器的区别
- 作用范围：全局过滤器在整个应用中都可用，而局部过滤器只能在定义它们的组件内使用。
- 命名冲突：由于全局过滤器是全局注册的，可能会导致命名冲突。局部过滤器则不会有这个问题。
- 性能考虑：全局过滤器会在每个Vue实例中都创建一份，如果过滤器很多或者应用很大，可能会影响性能。局部过滤器只在需要的组件内存在，更加高效。
注意事项
- 在Vue 3中，过滤器已被移除，推荐使用计算属性或方法来实现相同的功能。
- 如果你的项目中还在使用Vue 2，并且使用了大量的过滤器，建议在迁移到Vue 3时进行相应的调整。
结论
全局过滤器和局部过滤器提供了一种方便的方式来复用文本格式化的逻辑。然而，随着Vue的发展，过滤器已经被认为是不再必要的特性，并在Vue 3中被移除。开发者应当寻找替代方案，如计算属性或方法，来实现更加灵活和现代的代码结构。