vue filter实现原理
Vue Filter 的实现原理
Vue 过滤器（Filter）是一种用于文本格式化的功能，可以在模板中通过管道符 | 调用。其核心原理基于模板编译和运行时处理。
编译阶段处理
在模板编译阶段，Vue 的编译器会将过滤器语法解析为 AST（抽象语法树）。例如模板中的 {{ message | capitalize }} 会被解析为一个包含过滤器的表达式节点。编译器将过滤器转换为对应的函数调用链，例如 _f("capitalize")(message)，其中 _f 是 Vue 内部用于解析过滤器的函数。
运行时处理
在运行时，Vue 通过 resolveFilter 方法从当前组件的 filters 选项中查找对应的过滤器函数。如果找到，则传入表达式的值作为参数执行过滤逻辑。过滤器可以串联，例如 {{ message | filterA | filterB }} 会被转换为 _f("filterB")(_f("filterA")(message))。
过滤器注册方式
全局过滤器通过 Vue.filter() 注册，存储在 Vue 的全局配置中。局部过滤器定义在组件的 filters 选项中，仅在当前组件可用。优先级上，局部过滤器会覆盖同名的全局过滤器。
源码关键逻辑
在 Vue 2.x 源码中，过滤器的处理主要涉及以下核心函数：
src/core/instance/render-helpers/resolve-filter.js：解析过滤器函数。src/compiler/parser/filter-parser.js：模板编译时解析过滤器语法。src/core/util/options.js：合并全局和局部过滤器选项。
性能注意事项
过滤器在每次渲染时都会重新计算，因此不适合处理复杂或耗时的逻辑。对于性能敏感的场景，建议使用计算属性（computed）替代。
