1-Vue源码之【解析】

前言

文章基于 Vue3 源码，版本为 3.3.0-alpha.4，由于本人能力所限，只是对源码的粗略解读，最终目标是实现一个【粗糙】的 Vue 框架。（属实是能力有限(lll ￢ ω ￢)）

Parse

【注】Vue 源码里细节很多，对于很多情况，性能都考虑的很到位，比如该 parse.ts ，Vue 足足用了千多行代码书写，而我自己只是试着写了一些感兴趣的，仅仅只写了三百多行代码。

当然，代码嘛，以后有机会多读几遍，现在先浅尝。

在 Vue 源码中，我们可以在 vue/index.ts 文件下找到其导出了 compile 的方法，且 vue 是使用模板编译出代码的，所以我们先从 compile 开始，点进去会发现如下代码

export function compile(template: string, options: CompilerOptions = {}): CodegenResult {
  return baseCompile(
    template,
    extend({}, parserOptions, options, {
      // ...省略
    }),
  )
}

export function baseCompile(template: string | RootNode, options: CompilerOptions = {}): CodegenResult {
  // ...省略前后
  const ast = isString(template) ? baseParse(template, options) : template

  // ...省略
}

从上述代码我们可以看到，如果模板为字符串，那么就使用 baseParse 去解析，最终生成 抽象语法树（AST）。

模板语法 --> AST -> h函数(createVnode 函数) --> 虚拟DOM --> diff 运算 --> 真实DOM

我们的 baseParse 便是将模板语法解析成 AST 的方法

export function baseParse(content: string, options: ParserOptions = {}): RootNode {
  // 这里会创建一个解析器，里面保存了当前解析器解析到的位置，行数，源内容，当前内容等属性
  const context = createParserContext(content, options)

  // 该方法获取当前解析器的位置，内部实现仅仅只是返回 {line, offset, column}
  const start = getPosition(context)
  console.log({ context, start })

  // 主要先研究 parseChildren 这个方法
  return createRoot(parseChildren(context, TextModes.DATA, []), getSelection(context, start))
}

/**
 * 创建解析器上下文
 *
 * @param content 初始模板内容
 * @returns
 */
const createParseContext = (content: string): ParseContext => {
  return {
    line: 1, // 解析器解析到的行数
    offset: 0, // 解析器解析到的字数
    column: 0, // 源码里有，我自己写的后面没有做这个，不太好判断这是啥，列？但是为什么会有列的概念，期待后续研究
    originSource: content, // 模板源内容
    source: content, // 还待解析的模板内容
    // ...省略部分属性
  }
}

const MUSTACHE: ['{{', '}}'] = ['{{', '}}']

const startsWith = (s: string, c: string, pos?: number) => s.startsWith(c, pos)

const isEnd = (source: string) => {
  // 起初我这里只做了 !source 的判断，后来发现在解析DOM的时候，因为DOM可以嵌套子节点
  // 那么就需要递归 parseChildren 去处理子节点，那么这时候就需要多个 `source.startsWith('</')` 的处理，如果返回true，则表示遇到了闭合标签，需要退出循环，返回
  return !source || startsWith(source, '</')
}

const parseChildren = (context: ParseContext): NodeDataType[] => {
  const nodes: NodeDataType[] = []

  // isEnd判断是否跳出循环
  while (!isEnd(context.source)) {
    const source = context.source
    let node: NodeDataType

    // 这里源码做了很多精细的判断，我这里仅做了三种判断处理
    if (startsWith(source, '<')) {
      // 为 DOM  <
      node = parseElement(context)
    } else if (startsWith(source, MUSTACHE[0])) {
      // 为 MUSTACHE
      node = parseMustache(context)
    } else {
      // 为 text
      node = parseText(context)
    }

    if (node!) {
      // 源码里有node为数组的情况
      // if (isArray(node)) {
      //   for (let i = 0; i < node.length; i++) {
      //     pushNode(nodes, node[i])
      //   }
      // } else {
      pushNode(nodes, node)
      // }
    }
  }

  // 循环结束后，需要处理空白节点
  // 源码里做了更多判断，比如首元素，尾元素，两个元素之间的换行啥的
  // 我这里仅做了融合空白节点，且如果内容都是空白，那么则会被删除的操作。
  const _nodes = nodes
    .map((node) => {
      if (node.content && /[\t\r\n\f ]/.test(node.content)) {
        node.content = node.content.replace(/[\t\r\n\f ]+/g, ' ')

        if (/^\s+$/.test(node.content)) {
          return null as any
        }
      }

      return node
    })
    .filter(Boolean)

  return _nodes
}

---

ParseText

由于 DOM 解析会比较麻烦，且 DOM 解析也会涉及到文本解析，所以先从文本节点解析开始

/**
 * 解析文本内容
 *
 * @param context
 */
const parseText = (context: ParseContext): NodeDataType => {
  const start = getPosition(context)
  const source = context.source

  // 先获取最近的结束位置，(获取接下来文本内最近的 < 和 MUSTACHE 的位置，作为文本解析结束的位置)
  let endIndex = source.length
  for (let i = 0; i < ['<', MUSTACHE[0]].length; i++) {
    const chart = ['<', MUSTACHE[0]][i]
    const index = source.indexOf(chart)

    // 这里判断，离谁近用谁
    endIndex = endIndex > index && index !== -1 && index ? index : endIndex
  }

  // 把结束位置告诉真正解析文本内容的方法
  const content = parseTextData(context, endIndex!)

  // 返回的类型为文本类型，loc表示这段内容所处的位置信息
  return {
    type: NodeType.TEXT,
    content,
    loc: getLocation(context, start),
  }
}

/**
 * 取出文本 + 位移解析器。多个地方会用到，所以封装起来
 *
 * @param context
 * @param index
 */
const parseTextData = (context: ParseContext, index: number) => {
  // 取出文本
  const content = context.source.slice(0, index)

  // 位移解析器
  advanceBy(context, index)

  return content
}

1. 解析器位移 （set）

在最初我们创建了一个解析器，接下来我们解析各个语法的时候，都会用到下面这些方法，位移解析器，记录剩余需要解析的内容，当前的位置属性等。

// 位移解析器
const advanceBy = (context: ParseContext, len: number) => {
  const { source } = context

  // 位移方法
  advancePositionWithMutation(context, source, len)

  context.source = source.slice(len)
}

/**
 *
 * 位移空白
 */
const advanceSpace = (context: ParseContext) => {
  const { source } = context
  const preOffset = context.offset

  for (let i = 0; i < source.length; i++) {
    if (/^[\s\f\n\r\t\v]+$/.test(source[i])) {
      // 如果当前为换行符, 那么 line + 1
      if (source.charCodeAt(i) == 10) {
        context.line++
      }
      context.offset++
    } else {
      break
    }
  }

  context.source = source.slice(context.offset - preOffset)
  return context
}

/**
 * 根据source设置临时位置
 * 该功能为避免影响 源pos 的位置数据，而先去Object.assign({}, pos)生成一个临时的位置
 *
 * @param pos
 * @param source
 * @param offsetNum 位移数
 * @returns
 */
const advancePositionWithClone = (pos: Position, source: string, offsetNum: number = source.length) => {
  return advancePositionWithMutation(Object.assign({}, pos), source, offsetNum)
}

/**
 * 根据source设置实时位置
 *
 * @param pos
 * @param source
 * @param offsetNum 位移数
 * @returns
 */
const advancePositionWithMutation = (pos: Position, source: string, offsetNum: number = source.length) => {
  // 避免 offsetNum 为 -1 的情况
  offsetNum = offsetNum < 0 ? source.length : offsetNum
  let lineCount = 0

  for (let i = 0; i < offsetNum; i++) {
    // 如果当前为换行符, 那么 line + 1
    if (source.charCodeAt(i) == 10) {
      lineCount++
    }
  }

  pos.line += lineCount
  pos.offset += offsetNum

  return pos
}

2. 获取当前解析器位置 （get）

const getPosition = (context: ParseContext) => {
  const { line, offset } = context
  return { line, offset }
}

const getLocation = (context: ParseContext, start: Position, end?: Position) => {
  end = end || getPosition(context)
  return { start, end, source: context.originSource.slice(start.offset, end.offset) }
}

---

parseMustache

明白了文本解析，其实 mustache 解析也很简单，因为实际也是文本，所以内部用了 parseTextData 去获取 content，并且我们将 type 标记为 NodeType.STATE ，方便我们后续处理

/**
 * 解析Mustache
 *
 * @param context
 */
const parseMustache = (context: ParseContext): NodeDataType => {
  const start = getPosition(context)
  const [open, close] = MUSTACHE
  // 位移2步
  advanceBy(context, open.length)
  const closeIndex = context.source.indexOf(close)
  // 获取双花括号内的所有内容，这里用了 trim 去除左右空白
  const content = parseTextData(context, closeIndex).trim()

  // 因为parseTextData 里会位移到 close 之前，所以我们这里还需要再位移2步，让解析器停留在下一个需要解析的节点上
  advanceBy(context, close.length)

  return {
    type: NodeType.STATE,
    content,
    loc: getLocation(context, start),
  }
}

---

parseElement

解析元素，需要要处理 标签 和 属性 ，包括其内部的子元素。

所以，需要有 parseTag 和 parseAttrs 两个方法，子元素的解析实际上跟普通解析元素一致，所以只需要递归调用 parseChildren 即可

/**
 * 解析元素
 *
 * 这里先处理开始标签，接着去处理子元素，最终会碰到 闭合标签
 * @param context
 */
const parseElement = (context: ParseContext): NodeDataType => {
  // 解析标签，内部也会调用解析属性的方法
  const element = parseTag(context)

  // 处理子元素
  const children = parseChildren(context)
  element.children = children

  // 处理闭合标签
  if (!element.isSelfEndTag) {
    const closeTag = `</${element?.tag}>`

    if (startsWith(context.source, closeTag)) {
      advanceBy(context, closeTag.length)
    }
  }

  // 经历了一轮 children 的递归，需要重新计算该元素真正的结束位置
  element.loc = getLocation(context, element.loc.start)

  return element
}

1. parseTag

const parseTag = (context: ParseContext): NodeDataType => {
  const start = getPosition(context)
  const source = context.source
  // 处理标签名
  const match = /^\<([a-zA-Z]\w*)/.exec(source)

  if (!match?.[1]) {
    throw new Error('标签名称不正确')
  }

  // 位移解析器
  advanceBy(context, match?.[0].length)

  // 处理属性名
  const props = parseAttrs(context)

  // 清除空白
  advanceSpace(context)

  // 判断是否自闭合标签
  let isSelfEndTag = false
  if (startsWith(context.source, '/>')) {
    isSelfEndTag = true
  }

  advanceBy(context, isSelfEndTag ? 2 : 1)

  return {
    type: NodeType.ELEMENT,
    tag: match[1]!,
    loc: getLocation(context, start),
    content: null,
    props,
    isSelfEndTag,
  }
}

2. parseAttrs

属性的解析，是通过循环，一段一段解析的，首先要清除属性前的空白，然后用 nameReg 判断，接着用 nameRegAccurate 判断属性是什么类型的（有指令也有普通属性等，都需要在这里事先标记好）

当 name 处理完，接着便是处理 value，我们需要判断 value 前面是否有等号。

如果有，那么就需要判断引号正确与否。且在解析阶段，不需要去判断 value 是否正确，只需要找到下一个同样的引号，引号之间的内容作为字符串去处理即可。

如果引号乱用（比如一边用双引号，一边用单引号），那么在后续其他地方调用 value 时，就会报错，在解析属性阶段，无需去考虑复杂的东西，把一切当成字符串即可。

/**
 * 解析属性
 *
 * @param context
 */
const parseAttrs = (context: ParseContext): NodePropType[] => {
  const props: NodePropType[] = []
  // 存放属性名称
  const nameSet = new Set<string>([])

  // 1. 清除空白
  advanceSpace(context)

  // 一般会遇到 v-bind:xx="yy" @click="zz" aa="bb" :cc="dd" ee
  // 如果是 非空非`/`和`>`且最后不能是`=`号的，那说明是属性 name。类似于匹配了上述等号前面的情况
  const nameReg = /^[^\t\r\n\f />][^\t\r\n\f />=]*/
  const nameRegAccurate = /(?:^v-([a-z0-9-]+))?(?:(?::|^\.|^@|^#)(\[[^\]]+\]|[^\.]+))?(.+)?$/i

  // 循环解析，依次取出
  while (context.source.length > 0 && !startsWith(context.source, '>') && !startsWith(context.source, '/>')) {
    const start = getPosition(context)
    // =================
    // 处理 Name
    // =================
    const name = nameReg.exec(context.source)?.[0] ?? ''
    if (!name) {
      console.error('名称不合法')
      break
    }

    if (nameSet.has(name)) {
      console.error('存在相同的属性，自动覆盖')
    }
    nameSet.add(name)

    // 名字处理完，前进解析器并清除空白，并清除
    advanceBy(context, name.length)

    // =================
    // 处理 Value
    // =================
    let value = ''
    if (/^[\t\r\n\f ]*=/.test(context.source)) {
      advanceSpace(context)
      advanceBy(context, 1) // 前进去除等于号
      advanceSpace(context)

      // 1. 先初步解析一边value
      value = parseAttributeValue(context)
      if (value === undefined) {
        return []
      }
    }

    // 清除空白
    advanceSpace(context)

    // 2. 接着判断属性是指令，还是普通字符串
    if (/^(v-[A-Za-z0-9-]|:|\.|@|#)/.test(name)) {
      // 进入则说明是指令
      const exec = nameRegAccurate.exec(name ?? '')
      // 指令名（我这里不处理插槽，所以我去掉slot）
      const dirName = exec?.[1] || startsWith(name, ':') ? 'bind' : startsWith(name, '@') ? 'on' : ''

      // 由于正则的判断，只有 v-bind:name v-on:click ， @click :name 这种才有 exec?.[2]值
      // 类似于 v-if v-for 这种， exec[2] 为 undefined
      // 所以能进入，表示该指令有对应的 keyName
      if (exec?.[2]) {
        const keyName = exec?.[2]
        const keyIndex = name.lastIndexOf(exec[2])
        console.log({ source: context.source, dirName, keyName })
        console.log({ name, keyIndex, value, start })

        /**
         * 以 v-bind:age 为例子。我们的 start 是 字符v 所在的位置，
         * 而我们现在要求的是 age 的位置，且我们这里为了不影响源数据，需要用到 WithClone 方法，
         * 那么我们 age 的位置计算方式就是：当前位置 + 实际走的位置 keyIndex，
         * 当然计算位置，我们都需要判断空行或者其他，所以我们需要把这一小段文本 v-bind:age 带给 WithClone 方法。
         */
        // 获取 content 的位置
        const argStart = advancePositionWithClone(start, name, keyIndex)
        const argEnd = advancePositionWithClone(argStart, name, keyName.length)

        /**
         * const createSimpleExpression = (content: string, loc: Location): SimpleExpressionNode => {
              return {
                type: NodeType.SIMPLE_EXPRESSION,
                content,
                loc,
              }
           }
         * 
         */
        // 属性内容
        const arg = createSimpleExpression(keyName, getLocation(context, argStart, argEnd))
      }

      // 如果value表达式有左右引号，那么需要去掉引号，且位置要移动
      // 这里如果不去掉，那么举例 @click="onClick" 中的 exp 就变成了 "onClick"
      // 但我们实际需要的表达式是 onClick， 虽然你可以在后续的解析中在去掉，但先处理好最好
      if (value && value.isQuoted) {
        const valueLoc = value.loc!
        valueLoc.start.offset++
        valueLoc.end = advancePositionWithClone(valueLoc.start, value.content!)
        valueLoc.source = valueLoc.source.slice(1, -1) // 给 source 去掉左右引号
      }

      props.push({
        type: NodeType.DIRECTIVE,
        name: dirName, // 根据type来区分是 指令名 or 属性名
        // 属性 内容
        arg,
        // value 内容
        exp: createSimpleExpression(value?.content!, value?.loc!),
        loc: getLocation(context, start),
      })
    } else {
      // 3. 普通字符串处理
      props.push({
        type: NodeType.ATTRIBUTE,
        name,
        value,
        loc: getLocation(context, start),
      })
    }
  }

  return props
}

/**
 * 初步解析Value
 *
 * @param context
 * @returns
 */
const parseAttributeValue = (context: ParseContext): AttributeValue => {
  const start = getPosition(context)

  const quota = context.source[0]
  const isQuoted = quota == `"` || quota == `'`
  if (!isQuoted) {
    console.error('属性value不合法')
    return
  }

  advanceBy(context, 1) // 前进去除第一个引号
  const index = context.source.indexOf(quota)
  const content = parseTextData(context, index == -1 ? context.source.length : index)
  if (context.source[0] == quota) {
    advanceBy(context, 1) // 前进去除第二个引号
  }

  return {
    loc: getLocation(context, start),
    isQuoted,
    content,
  }
}

---

总结

第一次这样一点一滴翻看源码，并且自己试着码了一遍，收获很大，这种生成一种解析器的方式，让我感觉像是 C 语言的指针解析文本时候一样，一点一点前进。

里面涉及到的细节，远不是当初背面试题的那一句 用正则判断，解析元素，文本和 mustache 语法 来的那么简单。想想就可笑，之前背八股文，也背过一些源码题，确实只是应付面试罢了。当然你又不能不背，囧……

这篇文章属于是看了下源码之后，自己试着边撸边看的，自己后来测试了，大致上一样，当然细节捉襟见肘，毕竟人家一千多行代码，里面对很多文本的判断，不是我这三百多行可以比拟的，感兴趣的朋友，还是建议直接瞅源码。

看源码，我感觉还是更多锻炼思维这种东西，且大家瞅的时候，可以试着提前想想，自己的话，要如何去整。

比如在解析属性的时候，我一开始以为他会：把 < 和 > /> 之前的文本，用 split 去除掉多余空格，这样就会生成好 属性数组，接着我在遍历数组挨个去从中抽出 name 和 value。

但是实际上我看了源码之后，发现他用的方式和我想的方式不同，但是莫名其妙我就是觉得他的棒，总之就是那一刻……我看到了光（doge）