Vue 源码解析：深入浅出之 Mustache 折叠令牌

前端

2023-09-26 00:16:59

前言

在 Vue.js 的源码中，Mustache 模板引擎是实现模板编译和渲染的核心组件之一。其中，折叠令牌在 Mustache 模板引擎中扮演着至关重要的角色，它负责管理 Mustache 表达式的嵌套和解析。

栈与折叠令牌

栈是一种数据结构，遵循 FILO（先进后出）原则。在 Vue 中，折叠令牌被实现为一个栈结构，用于跟踪 Mustache 表达式的嵌套层级。当遇到 Mustache 表达式时，它会被压入栈中；当表达式解析完毕时，它会被弹出栈。

折叠令牌的实现

在 Vue 源码中，折叠令牌的实现主要体现在 parse 方法中。该方法负责解析 Mustache 表达式，并将解析后的结果存储在折叠令牌中。解析过程包括以下步骤：

识别表达式： 识别表达式，并将其分成三个部分：前缀、插值和后缀。
压入栈中： 将前缀压入栈中，表示开始了一个新的 Mustache 表达式。
插值解析： 解析插值部分，并生成相应的语法树。
后缀压入栈中： 将后缀压入栈中，表示结束了一个 Mustache 表达式。

折叠令牌的解析

当解析一个 Mustache 模板时，Vue 会遍历模板中的文本，并识别 Mustache 表达式。对于每个表达式，它会创建一个折叠令牌并将其压入栈中。当遇到嵌套的表达式时，它会继续压入栈中，直到所有表达式都被解析完毕。

解析结束后，Vue 会从栈中逐个弹出折叠令牌，并根据折叠令牌中的信息生成 AST（抽象语法树）。AST 了模板的结构，并被用来编译模板和生成渲染函数。

代码示例

// Vue 源码中 parse 方法
parse: function (content) {
  var tokens = []
  var stack = []

  this.stack = stack

  pushStack(stack, TokenTypes.StartTag, startToken)

  // 识别并处理 Mustache 表达式
  var special = charAt === '!' || charAt === '?'

  if (!special) {
    var expression = null

    if (content.charAt(0) === '{' && content.charAt(content.length - 1) === '}') {
      expression = content.slice(1, -1).trim()
    }

    pushStack(stack, TokenTypes.Expression, {
      expression: expression
    })
  }
}