Vue 基础面试题, 你了解 Vue 中的过滤器吗?它有哪些应用场景?
Vue 基础面试题, 你了解 Vue 中的过滤器吗?它有哪些应用场景?
QA
Step 1
Q:: 你了解 Vue 中的过滤器吗？它有哪些应用场景？
A:: Vue 的过滤器（filters）是用于文本显示格式化的常见工具。它们可以在插值表达式中使用，也可以在 v-bind 表达式中作为管道符 | 后的格式化函数。过滤器主要用于格式化数据，如日期、数字、字符串的格式转换等。例如，将时间戳转换为可读日期格式，或者将大写字母转为小写。Vue 2 中的过滤器常用于模板中处理展示逻辑，而在 Vue 3 中，官方更推荐使用方法或计算属性来替代过滤器。
Step 2
Q:: 如何在 Vue 组件中使用自定义过滤器？
A:: 在 Vue 组件中，自定义过滤器可以通过 Vue.filter() 全局注册，也可以在组件内通过 filters 选项局部注册。全局注册的过滤器可以在任何模板中使用，而局部注册的过滤器只在当前组件有效。使用时，过滤器可以通过插值表达式或 v-bind 指令与数据绑定。例如：{{ message | capitalize }}。
Step 3
Q:: Vue 3 中为什么移除了过滤器？如果还想使用类似功能怎么办？
A:: Vue 3 中官方移除了过滤器，主要是因为过滤器在复杂应用中容易导致逻辑分散、不易维护。为了保持代码的简洁和可维护性，推荐使用方法或计算属性代替过滤器的功能。如果开发者仍希望使用过滤器的类似功能，可以通过在方法或计算属性中实现相同的逻辑。
Step 4
Q:: 过滤器与计算属性、方法相比，有什么区别？
A:: 过滤器、计算属性和方法都是 Vue 中处理数据的一种方式。过滤器主要用于展示层面的简单数据格式化处理；计算属性是一种基于响应式数据缓存的属性，适用于需要根据其他数据计算得出的结果；方法则是任意的 JavaScript 函数，可以执行任意逻辑，不具备缓存特性。选择使用哪种方式通常取决于需求的复杂程度和性能考虑。