Vue 2源码解析Parse函数定义

2024-10-20 16:40:46

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() 函数中，首先会定义以下方法：

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

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

之后定义标签的处理方法（都是方法数组）

transforms ：包含 modules 配置中的两个处理方法，分别处理标签的 class 和 style
preTransforms：专门用来处理 input 的动态绑定，比如 <input v-model="data[type]" :type="type" />
postTransforms：这个在 web 端的模板编译是没有配置的，这里是一个空数组

stack：用来保存标签解析的一个栈，保证标签的匹配

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

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

closeElement：处理节点的 if，else-if，else 等情况下的条件，并更新 inVPre，inPre 的状态

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

最后，定义核心的解析方法 parseHTML

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

parseHTML

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

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

start：用来解析标签的开始部分（匹配到标签开始部分时调用）

end：用来解析结束标签（匹配到标签结束部分时调用）

**chars **：文本处理，解析到文本部分时调用

comment：注释处理，用来解析注释部分，在碰到注释时调用

以上就是Vue 2源码解析Parse函数定义的详细内容，更多关于Vue Parse函数定义的资料请关注我们其它相关文章！

Vue 2源码解析ParseHTML函数HTML模板

ParseHTML函数 - HTML 模板解析之前在解析 parse 函数时,我们知道整个解析 template 模板并生成 ast 对象的过程都发生在这个函数的执行过程中. 但是 parse 函数内部本身只定义了一些标签.指令的处理方法和警告函数,并且在传递给 parseHTML 函数的参数中定义了四个处理方法. 最终是通过调用 parseHTML 来解析 template 模板整个解析过程,其实就是通过一系列正则表达式来匹配 template 模板字符串,并截取该部分匹配内容并重新
vue parseHTML函数源码解析 AST预备知识

目录正文 createASTElement函数解析指令所用正则 parse 函数中的变量正文接上章节:parseHTML 函数源码解析AST 基本形成在正式扎进Vue parse源码之前,我们先了解下他周边的工具函数, 这能帮我们快速的去理解阅读. 还记得我们在上章节讲的element元素节点的描述对象吗? var element = { type: 1, tag: tag, parent: null, attrsList: attrs, children: [] } 在源码中定义了一
vue parseHTML函数源码解析start钩子函数

目录正文 platformGetTagNamespace 源码 isForbiddenTag 函数 addIfCondition是什么 processIfConditions 源码正文接上章节:parseHTML 函数源码解析 AST 预备知识现在我们就可以愉快的进入到Vue start钩子函数源码部分了. start: function start(tag, attrs, unary) { // check namespace. // inherit parent ns if ther
Vue 2源码解析HTMLParserOptions.start函数方法

目录 HTMLParserOptions.start() 处理后的 input ast element HTMLParserOptions.start() 用来解析标签的开始部分(匹配到标签开始部分时调用),主要区分标签类型.解析标签指令配置与动态绑定参数等等. let root let currentParent function start(tag, attrs, unary, start, end) { const ns = (currentParent && currentPare
vue parseHTML 函数源码解析

目录正文函数开头定义的一些常量和变量 while 循环 textEnd ===0 parseStartTag 函数解析开始标签总结: 正文接上篇: Vue编译器源码分析AST 抽象语法树 function parseHTML(html, options) { var stack = []; var expectHTML = options.expectHTML; var isUnaryTag$$1 = options.isUnaryTag || no; var canBeLeftOpen
vue parseHTML 函数拿到返回值后的处理源码解析

目录引言 parseStartTag函数返回值 handleStartTag源码 tagName 及unarySlash 调用parser钩子函数引言继上篇文章: parseHTML 函数源码解析 var startTagMatch = parseStartTag(); if (startTagMatch) { handleStartTag(startTagMatch); if (shouldIgnoreFirstNewline(startTagMatch.tagName, html))
Vue 2源码解析Parse函数定义

目录 Parse 函数 parseHTML Parse 函数在 baseCompile() 执行过程中,首先就是通过 parse方法解析 template模板字符串,生成对应的 AST 抽象语法树. 整个 parse函数定义太长,这里省略几个内部方法 /** * Convert HTML string to AST. */ export function parse(template: string, options: CompilerOptions): ASTElement { warn
vue parseHTML源码解析hars end comment钩子函数

目录引言 chars源码: parseText end 源码: 引言接上文 parseHTML 函数源码解析(六) start钩子函数接下来我们主要讲解当解析器遇到一个文本节点时会如何为文本节点创建元素描述对象,又会如何对文本节点做哪些特殊的处理. parseHTML(template, { chars: function(){ //... }, //... }) chars源码: chars: function chars(text) { if (!currentParent) { {
Vue3源码解析watch函数实例

目录引言一.watch参数类型 1. 选项options 2. 回调cb 3. 数据源source 二.watch函数三.watch的核心:doWatch 函数引言想起上次面试,问了个古老的问题:watch和computed的区别.多少有点感慨,现在已经很少见这种耳熟能详的问题了,网络上八股文不少.今天,我更想分享一下从源码的层面来区别这八竿子打不着的两者.本篇针对watch做分析,下一篇分析computed. 一.watch参数类型我们知道,vue3里的watch接收三个参数:侦听
详解vue mint-ui源码解析之loadmore组件

本文介绍了vue mint-ui源码解析之loadmore组件,分享给大家,具体如下: 接入官方接入文档mint-ui loadmore文档接入使用Example html <div id="app"> <mt-loadmore :top-method="loadTop" :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" :max-dis
Vue 2源码解读$mount函数原理

目录 1. $mount 函数来源 2. runtime 运行时的 $mount 函数 2.1 mountComponent 函数 2.2 _update 函数(首次渲染) 3. runtime-with-compiler 的 $mount 函数 4. runtime 对 Vue 构造函数的其他修改 1. $mount 函数来源上一节虽然直接从 core 目录下找到了 Vue 的构造函数定义,但是缺少 $mount 方法.所以直接从开发过程中使用的 vue.esm.js 找到对应的源码入口.
Vue AST源码解析第一篇

讲完了数据劫持原理和一堆初始化,现在是DOM相关的代码了. 上一节是从这个函数开始的: // Line-3924 Vue.prototype._init = function(options) { // 大量初始化 // ... // Go! if (vm.$options.el) { vm.$mount(vm.$options.el); } }; 弄完data属性的数据绑定后,开始处理el属性,也就是挂载的DOM节点,这里的vm.$options.el也就是传进去的'#app'字符串. 有一个
Vue源码解析之Template转化为AST的实现方法

什么是AST 在Vue的mount过程中,template会被编译成AST语法树,AST是指抽象语法树(abstract syntax tree或者缩写为AST),或者语法树(syntax tree),是源代码的抽象语法结构的树状表现形式. Virtual Dom Vue的一个厉害之处就是利用Virtual DOM模拟DOM对象树来优化DOM操作的一种技术或思路. Vue源码中虚拟DOM构建经历 template编译成AST语法树 -> 再转换为render函数最终返回一个VNode(VNod
Vue编译器解析compile源码解析

目录引言解析 compile compile 源码配置选项属性分别解析 finalOptions添加warn 方法两个特殊的属性处理引言在上篇文章 Vue编译器源码分析compileToFunctions作用中我们介绍到了,在 compileToFunctions 方法中: // compile var compiled = compile(template, options); 而真正的编译工作是依托于 compile 函数,接下来我们详细解析 compile . 解析 comp

Vue 2源码解析Parse函数定义

目录

Parse 函数

parseHTML

相关推荐

随机推荐