脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue过滤器转换机制

Vue编译器中的过滤器转换机制(transformFilter)详解

 更新时间：2025年11月05日 08:30:56   作者：excel  
本文将详细解读 Vue 兼容模式下的过滤器编译逻辑——transformFilter 模块,它是 Vue 3 为了兼容 Vue 2 模板过滤器语法而存在的编译阶段转换器,需要的朋友可以参考下

一、背景：为什么需要 transformFilter？

在 Vue 2 中，我们可以写出这样的模板：

{{ message | capitalize }}

过滤器（Filter）语法允许开发者在模板中使用管道符（|）对数据进行格式化。

但在 Vue 3 中，这个语法被移除了，因为它让模板逻辑与展示层混杂，不利于维护。

为了让旧项目平滑迁移到 Vue 3，官方在“兼容模式（compat mode） ”中保留了该特性，而 transformFilter 就是负责 在编译时 把 | 表达式“翻译”为函数调用的核心逻辑。

二、入口函数：transformFilter()

export const transformFilter: NodeTransform = (node, context) => {
  if (!isCompatEnabled(CompilerDeprecationTypes.COMPILER_FILTERS, context)) {
    return
  }

  if (node.type === NodeTypes.INTERPOLATION) {
    rewriteFilter(node.content, context)
  } else if (node.type === NodeTypes.ELEMENT) {
    node.props.forEach((prop) => {
      if (
        prop.type === NodeTypes.DIRECTIVE &&
        prop.name !== 'for' &&
        prop.exp
      ) {
        rewriteFilter(prop.exp, context)
      }
    })
  }
}

作用解析：

仅在兼容模式下生效（通过 isCompatEnabled() 判断）。

对两种类型的节点进行处理：

  1. 插值表达式（如 {{ msg | upper }}）
  2. 指令表达式（如 v-bind:title="msg | trim"）

每个匹配到的表达式都会交给 rewriteFilter() 进行进一步分析。

三、递归分析：rewriteFilter()

function rewriteFilter(node: ExpressionNode, context: TransformContext) {
  if (node.type === NodeTypes.SIMPLE_EXPRESSION) {
    parseFilter(node, context)
  } else {
    for (let child of node.children) {
      if (typeof child !== 'object') continue
      if (child.type === NodeTypes.SIMPLE_EXPRESSION) {
        parseFilter(child, context)
      } else if (child.type === NodeTypes.COMPOUND_EXPRESSION) {
        rewriteFilter(node, context)
      } else if (child.type === NodeTypes.INTERPOLATION) {
        rewriteFilter(child.content, context)
      }
    }
  }
}

思路讲解：

  • 简单表达式（如 msg | upper）直接进入下一步解析。
  • 复合表达式（如 msg + "!" | wrap）则递归展开所有子节点，逐层扫描是否存在过滤器语法。
  • 这种递归保证了在任意嵌套层级的表达式中都能正确识别过滤器。

四、核心逻辑：parseFilter()

function parseFilter(node: SimpleExpressionNode, context: TransformContext) {
  const exp = node.content
  let inSingle = false, inDouble = false, inTemplateString = false
  let inRegex = false
  let curly = 0, square = 0, paren = 0
  let lastFilterIndex = 0
  let expression, filters: string[] = []

  for (let i = 0; i < exp.length; i++) {
    const c = exp.charCodeAt(i)
    ...
    if (c === 0x7c && !curly && !square && !paren) {
      if (expression === undefined) {
        lastFilterIndex = i + 1
        expression = exp.slice(0, i).trim()
      } else {
        pushFilter()
      }
    }
  }

  if (expression === undefined) {
    expression = exp.trim()
  } else if (lastFilterIndex !== 0) {
    pushFilter()
  }

  if (filters.length) {
    for (let f of filters) {
      expression = wrapFilter(expression, f, context)
    }
    node.content = expression
  }
}

关键逻辑说明：

状态机扫描：
遍历表达式的每个字符，记录当前是否处于：

  • 单引号 '...'
  • 双引号 "..."
  • 模板字符串 `...`
  • 正则表达式 /.../
  • 括号或数组中
    避免误把字符串内的 | 当作过滤器分隔符。

识别管道符：
当遇到顶层 |（非 ||），并且不在任何括号中时，认为是一个过滤器的起点。

拆分表达式与过滤器：
将 message | capitalize | trim(10) 拆为：

expression = "message"
filters = ["capitalize", "trim(10)"]

重组表达式：
通过 wrapFilter() 将过滤器按从左到右顺序包装成嵌套调用：

toValidAssetId('capitalize', 'filter')(
  toValidAssetId('trim', 'filter')(message)
)

五、封装函数：wrapFilter()

function wrapFilter(exp: string, filter: string, context: TransformContext) {
  context.helper(RESOLVE_FILTER)
  const i = filter.indexOf('(')
  if (i < 0) {
    context.filters!.add(filter)
    return `${toValidAssetId(filter, 'filter')}(${exp})`
  } else {
    const name = filter.slice(0, i)
    const args = filter.slice(i + 1)
    context.filters!.add(name)
    return `${toValidAssetId(name, 'filter')}(${exp}${args !== ')' ? ',' + args : args}`
  }
}

功能说明：

  • 检查过滤器是否带参数（例如 truncate(10)）。
  • 调用 toValidAssetId() 将过滤器名转为合法标识符。
  • 将原表达式 exp 作为第一个参数注入。
  • 返回新的函数调用字符串。

六、对比：Vue 2 与 Vue 3 的不同

特性Vue 2Vue 3（兼容模式）Vue 3（标准模式）
过滤器语法支持 ``支持（内部转换）
编译时行为直接编译为 _f("filterName")(exp)重写为函数调用不处理
性能影响中等低（仅兼容模式触发）无

七、实践示例

// 输入模板
{{ message | capitalize | append('!') }}

// 编译后表达式
_append(
  _capitalize(message),
  '!'
)

解释：
编译器会把 | 链式调用转换为多层函数嵌套调用，保持与 Vue 2 的行为一致。

八、拓展与启发

这个模块虽然只是为兼容而存在，但它体现了 Vue 编译器的几个关键思想：

  1. 语法兼容通过 AST 转换实现，而非运行时兼容。
  2. 通过状态机扫描避免误判字符。
  3. 函数式封装（wrapFilter）保持代码纯净与扩展性。

九、潜在问题与注意事项

  • 性能开销：每个表达式都要字符级扫描，模板过大会影响编译性能。
  • 语法歧义：若表达式中本身含 |（非过滤器用途），可能被误判。
  • 未来弃用：Vue 3 官方已声明 filter 将在未来版本完全移除，开发者应尽早改用 计算属性或方法替代。

结语：

transformFilter 是 Vue 3 兼容模式中的一个“桥梁模块”，它让旧项目无需改动即可运行在新架构上，同时展示了 Vue 编译器在语法转换上的高灵活性。

以上就是Vue编译器中的过滤器转换机制(transformFilter)详解的详细内容，更多关于Vue过滤器转换机制的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 分享几个可以助你提高效率的Vue指令

    分享几个可以助你提高效率的Vue指令

    vue是一款渐进式JavaScript框架,渐进式是指由浅到深,由简单到复杂的使用vue框架,下面这篇文章主要给大家分享介绍了几个可以助你提高效率的Vue指令,需要的朋友可以参考下
    2022-05-05
  • vue parseHTML 函数源码解析

    vue parseHTML 函数源码解析

    这篇文章主要为大家介绍了vue parseHTML函数的源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-07-07
  • vue双向锚点实现过程简易版(scrollIntoView)

    vue双向锚点实现过程简易版(scrollIntoView)

    这篇文章主要介绍了vue双向锚点实现过程简易版(scrollIntoView),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue高德地图JS API实现海量点标记示例

    vue高德地图JS API实现海量点标记示例

    本文主要介绍了vue高德地图JS API实现海量点标记示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • vue实现登录界面

    vue实现登录界面

    这篇文章主要为大家详细介绍了vue实现登录界面，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06
  • vue鼠标悬停事件监听实现方法

    vue鼠标悬停事件监听实现方法

    页面在鼠标悬停(不动)n秒之后,页面进行相应的事件,下面这篇文章主要给大家介绍了关于vue鼠标悬停事件监听的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • 使用element-ui实现行合并过程

    使用element-ui实现行合并过程

    这篇文章主要介绍了使用element-ui实现行合并过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • Vue3中Transition和TransitionGroup组件的使用及说明

    Vue3中Transition和TransitionGroup组件的使用及说明

    本文将深入探讨这两个组件的作用,以及如何在实际项目中灵活运用它们,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-03-03
  • Vue3中Element Plus Table(表格)点击获取对应id方式

    Vue3中Element Plus Table(表格)点击获取对应id方式

    这篇文章主要介绍了Vue3中Element Plus Table(表格)点击获取对应id方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue仿微信app页面跳转动画效果

    Vue仿微信app页面跳转动画效果

    这篇文章主要介绍了Vue仿微信app页面跳转动画效果，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08

最新评论