Vue 2 阅读理解(四)之 Parse 函数定义

本文涉及的产品
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
简介: Vue 2 阅读理解(四)之 Parse 函数定义

Parse 函数


baseCompile() 执行过程中,首先就是通过 parse方法 解析 template模板字符串,生成对应的 AST 抽象语法树。


整个 parse函数 定义太长,这里省略几个内部方法


/**
 * Convert HTML string to AST.
 */
export function parse(template: string, options: CompilerOptions): ASTElement {
  warn = options.warn || baseWarn
  platformIsPreTag = options.isPreTag || no
  platformMustUseProp = options.mustUseProp || no
  platformGetTagNamespace = options.getTagNamespace || no
  const isReservedTag = options.isReservedTag || no
  maybeComponent = (el: ASTElement) =>
    !!(
      el.component ||
      el.attrsMap[':is'] ||
      el.attrsMap['v-bind:is'] ||
      !(el.attrsMap.is ? isReservedTag(el.attrsMap.is) : isReservedTag(el.tag))
    )
  transforms = pluckModuleFunction(options.modules, 'transformNode')
  preTransforms = pluckModuleFunction(options.modules, 'preTransformNode')
  postTransforms = pluckModuleFunction(options.modules, 'postTransformNode')
  delimiters = options.delimiters
  const stack: any[] = []
  const preserveWhitespace = options.preserveWhitespace !== false
  const whitespaceOption = options.whitespace
  let root
  let currentParent
  let inVPre = false
  let inPre = false
  let warned = false
  function warnOnce(msg, range) {
  }
  function closeElement(element) {
  }
  function trimEndingWhitespace(el) {
  }
  function checkRootConstraints(el) {
  }
  parseHTML(template, {
    warn,
    expectHTML: options.expectHTML,
    isUnaryTag: options.isUnaryTag,
    canBeLeftOpenTag: options.canBeLeftOpenTag,
    shouldDecodeNewlines: options.shouldDecodeNewlines,
    shouldDecodeNewlinesForHref: options.shouldDecodeNewlinesForHref,
    shouldKeepComment: options.comments,
    outputSourceRange: options.outputSourceRange,
    start(tag, attrs, unary, start, end) {
    },
    end(tag, start, end) {},
    chars(text: string, start?: number, end?: number) {
    },
    comment(text: string, start, end) {
    }
  })
  return root
}


parse() 函数中,首先会定义以下方法:


  1. 定义 warn 警告函数,用于在控制台显示错误提示


  1. 获取 options 中的几个标签判断函数,并定义一个 Vue 组件的判断方法 maybeComponent:通过判断当前节点的 ast 对象的几个属性,来确实是不是一个组件


  1. 之后定义标签的处理方法(都是方法数组)


  • transforms :包含 modules 配置中的两个处理方法,分别处理标签的 class 和 style


  • preTransforms:专门用来处理 input 的动态绑定,比如


  • postTransforms:这个在 web 端的模板编译是没有配置的,这里是一个空数组


  1. stack:用来保存标签解析的一个栈,保证标签的匹配


  1. 定义 delimiters 分隔符和其他的一些标志变量。


  1. trimEndingWhitespace:删除传入 el 节点的尾随空格节点,这里会判断当前解析的标签不在 pre 标签内部


  1. closeElement:处理节点的 if,else-if,else 等情况下的条件,并更新 inVPre,inPre 的状态


  1. checkRootConstraints:检查组件根节点,警告不能使用 slot 或者 template 作为组件根节点,也不能在根节点使用 v-for 循环


  1. 最后,定义核心的解析方法 parseHTML


这里面的大部分变量和方法都是闭包形式,会在整个解析过程中保持状态


parseHTML


parseHTML 就负责解析 template 字符串,生成 ast 对象,并通过闭包的方式将结果保存到 parse 函数定义的 root 变量。


函数接收 template 字符串 与 解析配置 options 两个参数,并且 options 需要包含以下四个方法:


  1. start:用来解析标签的开始部分(匹配到标签开始部分时调用)


  1. end:用来解析结束标签(匹配到标签结束部分时调用)


  1. **chars **:文本处理,解析到文本部分时调用


  1. comment:注释处理,用来解析注释部分,在碰到注释时调用


目录
相关文章
|
2月前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
1月前
|
前端开发 JavaScript 开发者
|
3月前
|
JavaScript 前端开发
vue3通过render函数实现一个菜单下拉框
【8月更文挑战第18天】vue3通过render函数实现一个菜单下拉框
152 0
|
16天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
19天前
|
JavaScript API
vue3知识点:ref函数
vue3知识点:ref函数
29 2
|
19天前
|
JavaScript API
vue3知识点:自定义hook函数
vue3知识点:自定义hook函数
26 2
|
19天前
|
API
vue3知识点:reactive函数
vue3知识点:reactive函数
24 1
|
26天前
|
JavaScript
|
29天前
|
JavaScript
vue 组件中的 data 为什么是一个函数 ?
【10月更文挑战第8天】 在 Vue 组件中,`data` 被定义为一个函数而非普通对象,以确保每个组件实例拥有独立的数据空间,避免数据混乱。这种方式还支持数据的响应式更新、组件的继承与扩展,并有助于避免潜在问题,提升应用的可靠性和性能。
19 2
|
29天前
|
JavaScript 开发者
Vue Render函数
【10月更文挑战第11天】 Vue 的 Render 函数提供了一种强大而灵活的方法来创建虚拟 DOM 节点,使开发者能够更精细地控制组件的构建过程。通过 `createElement` 参数,可以动态生成各种元素和组件,实现复杂逻辑和高级定制。尽管使用 Render 函数需要更多代码和对虚拟 DOM 的深入理解,但它在处理复杂场景时展现出巨大的优势。
14 2