关于vue.js:Vue-源码解读8-编译器-之-解析下

当学习成为了习惯，常识也就变成了常识。 感激各位的 关注 、 点赞 、 珍藏 和评论。

新视频和文章会第一工夫在微信公众号发送，欢送关注：李永宁 lyn

文章已收录到 github 仓库 liyongning/blog，欢送 Watch 和 Star。

非凡阐明

因为文章篇幅限度，所以将 Vue 源码解读（8）—— 编译器 之 解析 拆成了两篇文章，本篇是对 Vue 源码解读（8）—— 编译器 之 解析（上）的一个补充，所以在浏览时请同时关上 Vue 源码解读（8）—— 编译器 之 解析（上）一起浏览。

processAttrs

/src/compiler/parser/index.js

/**
 * 解决元素上的所有属性：* v-bind 指令变成：el.attrs 或 el.dynamicAttrs = [{name, value, start, end, dynamic}, ...]，*                或者是必须应用 props 的属性，变成了 el.props = [{name, value, start, end, dynamic}, ...]
 * v-on 指令变成：el.events 或 el.nativeEvents = {name: [{ value, start, end, modifiers, dynamic}, ...] }
 * 其它指令：el.directives = [{name, rawName, value, arg, isDynamicArg, modifier, start, end}, ...]
 * 原生属性：el.attrs = [{name, value, start, end}]，或者一些必须应用 props 的属性，变成了：*         el.props = [{name, value: true, start, end, dynamic}]
 */
function processAttrs(el) {// list = [{ name, value, start, end}, ...]
  const list = el.attrsList
  let i, l, name, rawName, value, modifiers, syncGen, isDynamic
  for (i = 0, l = list.length; i < l; i++) {
    // 属性名
    name = rawName = list[i].name
    // 属性值
    value = list[i].value
    if (dirRE.test(name)) {
      // 阐明该属性是一个指令

      // 元素上存在指令，将元素标记动静元素
      // mark element as dynamic
      el.hasBindings = true
      // modifiers，在属性名上解析修饰符，比方 xx.lazy
      modifiers = parseModifiers(name.replace(dirRE, ''))
      // support .foo shorthand syntax for the .prop modifier
      if (process.env.VBIND_PROP_SHORTHAND && propBindRE.test(name)) {
        // 为 .props 修饰符反对 .foo 速记写法
        (modifiers || (modifiers = {})).prop = true
        name = `.` + name.slice(1).replace(modifierRE, '')
      } else if (modifiers) {
        // 属性中的修饰符去掉，失去一个洁净的属性名
        name = name.replace(modifierRE, '')
      }
      if (bindRE.test(name)) { // v-bind, <div :id="test"></div>
        // 解决 v-bind 指令属性，最初失去 el.attrs 或者 el.dynamicAttrs = [{name, value, start, end, dynamic}, ...]

        // 属性名，比方：id
        name = name.replace(bindRE, '')
        // 属性值，比方：test
        value = parseFilters(value)
        // 是否为动静属性 <div :[id]="test"></div>
        isDynamic = dynamicArgRE.test(name)
        if (isDynamic) {// 如果是动静属性，则去掉属性两侧的方括号 []
          name = name.slice(1, -1)
        }
        // 提醒，动静属性值不能为空字符串
        if (
          process.env.NODE_ENV !== 'production' &&
          value.trim().length === 0) {
          warn(`The value for a v-bind expression cannot be empty. Found in "v-bind:${name}"`
          )
        }
        // 存在修饰符
        if (modifiers) {if (modifiers.prop && !isDynamic) {name = camelize(name)
            if (name === 'innerHtml') name = 'innerHTML'
          }
          if (modifiers.camel && !isDynamic) {name = camelize(name)
          }
          // 解决 sync 修饰符
          if (modifiers.sync) {syncGen = genAssignmentCode(value, `$event`)
            if (!isDynamic) {
              addHandler(
                el,
                `update:${camelize(name)}`,
                syncGen,
                null,
                false,
                warn,
                list[i]
              )
              if (hyphenate(name) !== camelize(name)) {
                addHandler(
                  el,
                  `update:${hyphenate(name)}`,
                  syncGen,
                  null,
                  false,
                  warn,
                  list[i]
                )
              }
            } else {
              // handler w/ dynamic event name
              addHandler(
                el,
                `"update:"+(${name})`,
                syncGen,
                null,
                false,
                warn,
                list[i],
                true // dynamic
              )
            }
          }
        }
        if ((modifiers && modifiers.prop) || (!el.component && platformMustUseProp(el.tag, el.attrsMap.type, name)
        )) {
          // 将属性对象增加到 el.props 数组中，示意这些属性必须通过 props 设置
          // el.props = [{name, value, start, end, dynamic}, ...]
          addProp(el, name, value, list[i], isDynamic)
        } else {
          // 将属性增加到 el.attrs 数组或者 el.dynamicAttrs 数组
          addAttr(el, name, value, list[i], isDynamic)
        }
      } else if (onRE.test(name)) { // v-on, 处理事件，<div @click="test"></div>
        // 属性名，即事件名
        name = name.replace(onRE, '')
        // 是否为动静属性
        isDynamic = dynamicArgRE.test(name)
        if (isDynamic) {// 动静属性，则获取 [] 中的属性名
          name = name.slice(1, -1)
        }
        // 处理事件属性，将属性的信息增加到 el.events 或者 el.nativeEvents 对象上，格局：// el.events = [{value, start, end, modifiers, dynamic}, ...]
        addHandler(el, name, value, modifiers, false, warn, list[i], isDynamic)
      } else { // normal directives，其它的一般指令
        // 失去 el.directives = [{name, rawName, value, arg, isDynamicArg, modifier, start, end}, ...]
        name = name.replace(dirRE, '')
        // parse arg
        const argMatch = name.match(argRE)
        let arg = argMatch && argMatch[1]
        isDynamic = false
        if (arg) {name = name.slice(0, -(arg.length + 1))
          if (dynamicArgRE.test(arg)) {arg = arg.slice(1, -1)
            isDynamic = true
          }
        }
        addDirective(el, name, rawName, value, arg, isDynamic, modifiers, list[i])
        if (process.env.NODE_ENV !== 'production' && name === 'model') {checkForAliasModel(el, value)
        }
      }
    } else {
      // 以后属性不是指令
      // literal attribute
      if (process.env.NODE_ENV !== 'production') {const res = parseText(value, delimiters)
        if (res) {
          warn(`${name}="${value}": ` +
            'Interpolation inside attributes has been removed.' +
            'Use v-bind or the colon shorthand instead. For example,' +
            'instead of <div id="{{val}}">, use <div :id="val">.',
            list[i]
          )
        }
      }
      // 将属性对象放到 el.attrs 数组中，el.attrs = [{name, value, start, end}]
      addAttr(el, name, JSON.stringify(value), list[i])
      // #6887 firefox doesn't update muted state if set via attribute
      // even immediately after element creation
      if (!el.component &&
        name === 'muted' &&
        platformMustUseProp(el.tag, el.attrsMap.type, name)) {addProp(el, name, 'true', list[i])
      }
    }
  }
}

addHandler

/src/compiler/helpers.js

/**
 * 处理事件属性，将事件属性增加到 el.events 对象或者 el.nativeEvents 对象中，格局：* el.events[name] = [{value, start, end, modifiers, dynamic}, ...]
 * 其中用了大量的篇幅在解决 name 属性带修饰符 (modifier) 的状况
 * @param {*} el ast 对象
 * @param {*} name 属性名，即事件名
 * @param {*} value 属性值，即事件回调函数名
 * @param {*} modifiers 修饰符
 * @param {*} important 
 * @param {*} warn 日志
 * @param {*} range 
 * @param {*} dynamic 属性名是否为动静属性
 */
export function addHandler (
  el: ASTElement,
  name: string,
  value: string,
  modifiers: ?ASTModifiers,
  important?: boolean,
  warn?: ?Function,
  range?: Range,
  dynamic?: boolean
) {
  // modifiers 是一个对象，如果传递的参数为空，则给一个解冻的空对象
  modifiers = modifiers || emptyObject
  // 提醒：prevent 和 passive 修饰符不能一起应用
  // warn prevent and passive modifier
  /* istanbul ignore if */
  if (
    process.env.NODE_ENV !== 'production' && warn &&
    modifiers.prevent && modifiers.passive
  ) {
    warn(
      'passive and prevent can\'t be used together. '+'Passive handler can\'t prevent default event.',
      range
    )
  }

  // 标准化 click.right 和 click.middle，它们实际上不会被真正的触发，从技术讲他们是它们
  // 是特定于浏览器的，但至多目前地位只有浏览器才具备右键和两头键的点击
  // normalize click.right and click.middle since they don't actually fire
  // this is technically browser-specific, but at least for now browsers are
  // the only target envs that have right/middle clicks.
  if (modifiers.right) {
    // 右键
    if (dynamic) {
      // 动静属性
      name = `(${name})==='click'?'contextmenu':(${name})`
    } else if (name === 'click') {
      // 非动静属性，name = contextmenu
      name = 'contextmenu'
      // 删除修饰符中的 right 属性
      delete modifiers.right
    }
  } else if (modifiers.middle) {
    // 两头键
    if (dynamic) {// 动静属性，name => mouseup 或者 ${name}
      name = `(${name})==='click'?'mouseup':(${name})`
    } else if (name === 'click') {
      // 非动静属性，mouseup
      name = 'mouseup'
    }
  }

  /**
   * 解决 capture、once、passive 这三个修饰符，通过给 name 增加不同的标记来标记这些修饰符
   */
  // check capture modifier
  if (modifiers.capture) {
    delete modifiers.capture
    // 给带有 capture 修饰符的属性，加上 ! 标记
    name = prependModifierMarker('!', name, dynamic)
  }
  if (modifiers.once) {
    delete modifiers.once
    // once 修饰符加 ~ 标记
    name = prependModifierMarker('~', name, dynamic)
  }
  /* istanbul ignore if */
  if (modifiers.passive) {
    delete modifiers.passive
    // passive 修饰符加 & 标记
    name = prependModifierMarker('&', name, dynamic)
  }

  let events
  if (modifiers.native) {
    // native 修饰符，监听组件根元素的原生事件，将事件信息寄存到 el.nativeEvents 对象中
    delete modifiers.native
    events = el.nativeEvents || (el.nativeEvents = {})
  } else {events = el.events || (el.events = {})
  }

  const newHandler: any = rangeSetItem({value: value.trim(), dynamic }, range)
  if (modifiers !== emptyObject) {
    // 阐明有修饰符，将修饰符对象放到 newHandler 对象上
    // {value, dynamic, start, end, modifiers}
    newHandler.modifiers = modifiers
  }

  // 将配置对象放到 events[name] = [newHander, handler, ...]
  const handlers = events[name]
  /* istanbul ignore if */
  if (Array.isArray(handlers)) {important ? handlers.unshift(newHandler) : handlers.push(newHandler)
  } else if (handlers) {events[name] = important ? [newHandler, handlers] : [handlers, newHandler]
  } else {events[name] = newHandler
  }

  el.plain = false
}

addIfCondition

/src/compiler/parser/index.js

/**
 * 将传递进来的条件对象放进 el.ifConditions 数组中
 */
export function addIfCondition(el: ASTElement, condition: ASTIfCondition) {if (!el.ifConditions) {el.ifConditions = []
  }
  el.ifConditions.push(condition)
}

processPre

/src/compiler/parser/index.js

/**
 * 如果元素上存在 v-pre 指令，则设置 el.pre = true 
 */
function processPre(el) {if (getAndRemoveAttr(el, 'v-pre') != null) {el.pre = true}
}

processRawAttrs

/src/compiler/parser/index.js

/**
 * 设置 el.attrs 数组对象，每个元素都是一个属性对象 {name: attrName, value: attrVal, start, end}
 */
function processRawAttrs(el) {
  const list = el.attrsList
  const len = list.length
  if (len) {const attrs: Array<ASTAttr> = el.attrs = new Array(len)
    for (let i = 0; i < len; i++) {attrs[i] = {name: list[i].name,
        value: JSON.stringify(list[i].value)
      }
      if (list[i].start != null) {attrs[i].start = list[i].start
        attrs[i].end = list[i].end
      }
    }
  } else if (!el.pre) {
    // non root node in pre blocks with no attributes
    el.plain = true
  }
}

processIf

/src/compiler/parser/index.js

/**
 * 解决 v-if、v-else-if、v-else
 * 失去 el.if = "exp"，el.elseif = exp, el.else = true
 * v-if 属性会额定在 el.ifConditions 数组中增加 {exp, block} 对象
 */
function processIf(el) {
  // 获取 v-if 属性的值，比方 <div v-if="test"></div>
  const exp = getAndRemoveAttr(el, 'v-if')
  if (exp) {
    // el.if = "test"
    el.if = exp
    // 在 el.ifConditions 数组中增加 {exp, block}
    addIfCondition(el, {
      exp: exp,
      block: el
    })
  } else {
    // 解决 v-else，失去 el.else = true
    if (getAndRemoveAttr(el, 'v-else') != null) {el.else = true}
    // 解决 v-else-if，失去 el.elseif = exp
    const elseif = getAndRemoveAttr(el, 'v-else-if')
    if (elseif) {el.elseif = elseif}
  }
}

processOnce

/src/compiler/parser/index.js

/**
 * 解决 v-once 指令，失去 el.once = true
 * @param {*} el 
 */
function processOnce(el) {const once = getAndRemoveAttr(el, 'v-once')
  if (once != null) {el.once = true}
}

checkRootConstraints

/src/compiler/parser/index.js

/**
 * 查看根元素：*   不能应用 slot 和 template 标签作为组件的根元素
 *   不能在有状态组件的 根元素 上应用 v-for 指令，因为它会渲染出多个元素
 * @param {*} el 
 */
function checkRootConstraints(el) {
  // 不能应用 slot 和 template 标签作为组件的根元素
  if (el.tag === 'slot' || el.tag === 'template') {
    warnOnce(`Cannot use <${el.tag}> as component root element because it may ` +
      'contain multiple nodes.',
      {start: el.start}
    )
  }
  // 不能在有状态组件的 根元素 上应用 v-for，因为它会渲染出多个元素
  if (el.attrsMap.hasOwnProperty('v-for')) {
    warnOnce(
      'Cannot use v-for on stateful component root element because' +
      'it renders multiple elements.',
      el.rawAttrsMap['v-for']
    )
  }
}

closeElement

/src/compiler/parser/index.js

/**
 * 次要做了 3 件事：*   1、如果元素没有被解决过，即 el.processed 为 false，则调用 processElement 办法解决节点上的泛滥属性
 *   2、让本人和父元素产生关系，将本人放到父元素的 children 数组中，并设置本人的 parent 属性为 currentParent
 *   3、设置本人的子元素，将本人所有非插槽的子元素放到本人的 children 数组中
 */
function closeElement(element) {
  // 移除节点开端的空格，以后 pre 标签内的元素除外
  trimEndingWhitespace(element)
  // 以后元素不再 pre 节点内，并且也没有被解决过
  if (!inVPre && !element.processed) {
    // 别离解决元素节点的 key、ref、插槽、自闭合的 slot 标签、动静组件、class、style、v-bind、v-on、其它指令和一些原生属性 
    element = processElement(element, options)
  }
  // 解决根节点上存在 v-if、v-else-if、v-else 指令的状况
  // 如果根节点存在 v-if 指令，则必须还提供一个具备 v-else-if 或者 v-else 的同级别节点，避免根元素不存在
  // tree management
  if (!stack.length && element !== root) {
    // allow root elements with v-if, v-else-if and v-else
    if (root.if && (element.elseif || element.else)) {if (process.env.NODE_ENV !== 'production') {
        // 查看根元素
        checkRootConstraints(element)
      }
      // 给根元素设置 ifConditions 属性，root.ifConditions = [{exp: element.elseif, block: element}, ...]
      addIfCondition(root, {
        exp: element.elseif,
        block: element
      })
    } else if (process.env.NODE_ENV !== 'production') {
      // 提醒，示意不应该在 根元素 上只应用 v-if，应该将 v-if、v-else-if 一起应用，保障组件只有一个根元素
      warnOnce(
        `Component template should contain exactly one root element. ` +
        `If you are using v-if on multiple elements, ` +
        `use v-else-if to chain them instead.`,
        {start: element.start}
      )
    }
  }
  // 让本人和父元素产生关系
  // 将本人放到父元素的 children 数组中，而后设置本人的 parent 属性为 currentParent
  if (currentParent && !element.forbidden) {if (element.elseif || element.else) {processIfConditions(element, currentParent)
    } else {if (element.slotScope) {
        // scoped slot
        // keep it in the children list so that v-else(-if) conditions can
        // find it as the prev node.
        const name = element.slotTarget || '"default"'
          ; (currentParent.scopedSlots || (currentParent.scopedSlots = {}))[name] = element
      }
      currentParent.children.push(element)
      element.parent = currentParent
    }
  }

  // 设置本人的子元素
  // 将本人的所有非插槽的子元素设置到 element.children 数组中
  // final children cleanup
  // filter out scoped slots
  element.children = element.children.filter(c => !(c: any).slotScope)
  // remove trailing whitespace node again
  trimEndingWhitespace(element)

  // check pre state
  if (element.pre) {inVPre = false}
  if (platformIsPreTag(element.tag)) {inPre = false}
  // 别离为 element 执行 model、class、style 三个模块的 postTransform 办法
  // 然而 web 平台没有提供该办法
  // apply post-transforms
  for (let i = 0; i < postTransforms.length; i++) {postTransforms[i](element, options)
  }
}

trimEndingWhitespace

/src/compiler/parser/index.js

/**
 * 删除元素中空白的文本节点，比方：<div> </div>，删除 div 元素中的空白节点，将其从元素的 children 属性中移出去
 */
function trimEndingWhitespace(el) {if (!inPre) {
    let lastNode
    while ((lastNode = el.children[el.children.length - 1]) &&
      lastNode.type === 3 &&
      lastNode.text === ' '
    ) {el.children.pop()
    }
  }
}

processIfConditions

/src/compiler/parser/index.js

function processIfConditions(el, parent) {
  // 找到 parent.children 中的最初一个元素节点
  const prev = findPrevElement(parent.children)
  if (prev && prev.if) {
    addIfCondition(prev, {
      exp: el.elseif,
      block: el
    })
  } else if (process.env.NODE_ENV !== 'production') {
    warn(`v-${el.elseif ? ('else-if="' + el.elseif + '"') :'else'} ` +
      `used on element <${el.tag}> without corresponding v-if.`,
      el.rawAttrsMap[el.elseif ? 'v-else-if' : 'v-else']
    )
  }
}

findPrevElement

/src/compiler/parser/index.js

/**
 * 找到 children 中的最初一个元素节点 
 */
function findPrevElement(children: Array<any>): ASTElement | void {
  let i = children.length
  while (i--) {if (children[i].type === 1) {return children[i]
    } else {if (process.env.NODE_ENV !== 'production' && children[i].text !== ' ') {
        warn(`text "${children[i].text.trim()}" between v-if and v-else(-if) ` +
          `will be ignored.`,
          children[i]
        )
      }
      children.pop()}
  }
}

帮忙

到这里编译器的解析局部就完结了，置信很多人看的是云里雾里的，即便多看几遍可能也没有那么清晰。

不要焦急，这个很失常，编译器这块儿的代码量的确是比拟大。然而内容自身其实不简单，简单的是它要解决货色切实是太多了，这才导致这部分的代码量微小，绝对应的，就会产生比拟难的感觉。的确不简略，至多我感觉它是整个框架最简单最难的中央了。

对照着视频和文章大家能够多看几遍，不明确的中央写一些示例代码辅助调试，编写具体的正文。还是那句话，书读百遍，其义自现。

浏览的过程中，大家须要抓住编译器解析局部的实质：将类 HTML 字符串模版解析成 AST 对象。

所以这么多代码都在做一件事件，就是解析字符串模版，将整个模版用 AST 对象来示意和记录。所以，大家浏览的时候，能够将解析过程中生成的 AST 对象记录下来，帮忙浏览和了解，这样在读完当前不至于那么迷茫，也有助于大家了解。

这是我在浏览的时候的一个简略记录：

const element = {
  type: 1,
  tag,
  attrsList: [{name: attrName, value: attrVal, start, end}],
  attrsMap: {attrName: attrVal,},
  rawAttrsMap: {attrName: attrVal, type: checkbox},
  // v-if
  ifConditions: [{exp, block}],
  // v-for
  for: iterator,
  alias: 别名,
  // :key
  key: xx,
  // ref
  ref: xx,
  refInFor: boolean,
  // 插槽
  slotTarget: slotName,
  slotTargetDynamic: boolean,
  slotScope: 作用域插槽的表达式,
  scopeSlot: {
    name: {
      slotTarget: slotName,
      slotTargetDynamic: boolean,
      children: {
        parent: container,
        otherProperty,
      }
    },
    slotScope: 作用域插槽的表达式,
  },
  slotName: xx,
  // 动静组件
  component: compName,
  inlineTemplate: boolean,
  // class
  staticClass: className,
  classBinding: xx,
  // style
  staticStyle: xx,
  styleBinding: xx,
  // attr
  hasBindings: boolean,
  nativeEvents: {同 evetns},
  events: {name: [{ value, dynamic, start, end, modifiers}]
  },
  props: [{name, value, dynamic, start, end}],
  dynamicAttrs: [同 attrs],
  attrs: [{name, value, dynamic, start, end}],
  directives: [{name, rawName, value, arg, isDynamicArg, modifiers, start, end}],
  // v-pre
  pre: true,
  // v-once
  once: true,
  parent,
  children: [],
  plain: boolean,
}

总结

• 面试官 问：简略说一下 Vue 的编译器都做了什么？

  答：

  Vue 的编译器做了三件事件：

  • 将组件的 html 模版解析成 AST 对象
  • 优化，遍历 AST，为每个节点做动态标记，标记其是否为动态节点，而后进一步标记出动态根节点，这样在后续更新的过程中就能够跳过这些动态节点了；标记动态根用于生成渲染函数阶段，生成动态根节点的渲染函数
  • 从 AST 生成运行时的渲染函数，即大家说的 render，其实还有一个，就是 staticRenderFns 数组，外面寄存了所有的动态节点的渲染函数

• 面试官 问：具体说一说编译器的解析过程，它是怎么将 html 字符串模版变成 AST 对象的？

  答：

  • 遍历 HTML 模版字符串，通过正则表达式匹配 “<“

  • 跳过某些不须要解决的标签，比方：正文标签、条件正文标签、Doctype。

    备注：整个解析过程的外围是解决开始标签和完结标签

  • 解析开始标签

    • 失去一个对象，包含 标签名（tagName）、所有的属性（attrs）、标签在 html 模版字符串中的索引地位
    • 进一步解决上一步失去的 attrs 属性，将其变成 [{name: attrName, value: attrVal, start: xx, end: xx}, …] 的模式
    • 通过标签名、属性对象和以后元素的父元素生成 AST 对象，其实就是一个 一般的 JS 对象，通过 key、value 的模式记录了该元素的一些信息
    • 接下来进一步解决开始标签上的一些指令，比方 v-pre、v-for、v-if、v-once，并将处理结果放到 AST 对象上
    • 解决完结将 ast 对象寄存到 stack 数组
    • 解决实现后会截断 html 字符串，将曾经解决掉的字符串截掉

  • 解析闭合标签

    • 如果匹配到完结标签，就从 stack 数组中拿出最初一个元素，它和以后匹配到的完结标签是一对。

    • 再次解决开始标签上的属性，这些属性和后面解决的不一样，比方：key、ref、scopedSlot、款式等，并将处理结果放到元素的 AST 对象上

      备注 视频中说这块儿有误，回头看了下，没有问题，不须要改，的确是这样

    • 而后将以后元素和父元素产生分割，给以后元素的 ast 对象设置 parent 属性，而后将本人放到父元素的 ast 对象的 children 数组中
  • 最初遍历残缺个 html 模版字符串当前，返回 ast 对象

链接

• 配套视频，微信公众号回复：” 精通 Vue 技术栈源码原理视频版 ” 获取
• 精通 Vue 技术栈源码原理 专栏
• github 仓库 liyongning/Vue 欢送 Star

感激各位的：关注 、 点赞 、 珍藏 和评论，咱们下期见。

当学习成为了习惯，常识也就变成了常识。 感激各位的 关注 、 点赞 、 珍藏 和评论。

新视频和文章会第一工夫在微信公众号发送，欢送关注：李永宁 lyn

文章已收录到 github 仓库 liyongning/blog，欢送 Watch 和 Star。