Vue源码解析系列——模板编译篇：parse编译不同标签

最新推荐文章于 2024-08-16 09:16:58 发布
最新推荐文章于 2024-08-16 09:16:58 发布
阅读量422 收藏
点赞数
文章标签： vue 源码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hd101367816/article/details/114294697
版权

准备

vue版本号2.6.12，为方便分析，选择了runtime+compiler版本。

回顾

如果有感兴趣的同学可以看看我之前的源码分析文章，这里呈上链接：《Vue源码分析系列：目录》

模板编译的入口

在runtime+compiler版本中，Vue再执行挂载操作时，会调用为runtime+compiler版本特别定制的$mount方法，这个方法主要是将模板template编译为可执行的render函数。所以，整个Vue的模板编译入口就在这个$mount中。

$mount

const { render, staticRenderFns } = compileToFunctions(template, {
        outputSourceRange: process.env.NODE_ENV !== 'production',
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)

这里调用了compileToFunctions获取了render函数。
Vue在定义compiler函数时使用大量的函数柯里化技术，保存了不同平台的编译选项。最终这个compileToFunctions执行的是src/compiler/index.js中的createCompilerCreator函数的参数（有兴趣的童鞋可以自己一层一层往里面找），这个函数的参数也是一个函数baseCompile，这里我们来看下这个函数。

baseCompile

function baseCompile(
  template: string,
  options: CompilerOptions
): CompiledResult {
  //生成AST
  const ast = parse(template.trim(), options);
  //优化AST
  if (options.optimize !== false) {
    optimize(ast, options);
  }
  //用AST生成一些代码
  const code = generate(ast, options);
  return {
    ast,
    render: code.render,b  
    staticRenderFns: code.staticRenderFns,
  };
}

这里的逻辑相对而言清晰很多，首先调用parse方法生成了一个AST抽象语法树。然后调用optimize对这个AST进行了优化，添加了一些属性。最后使用generate将AST转化为可执行的一个函数体，用于放入new Function()中执行（这个函数就是render函数）。
这一篇，我们主要分析的是parse方法，看看Vue是如何将一个HTML字符串解析为AST的。

parse

parse的函数逻辑较为复杂，我们可以宏观的看一看大概它干了什么：

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 || !isReservedTag(el.tag);

  transforms = pluckModuleFunction(options.modules, "transformNode");
  preTransforms = pluckModuleFunction(options.modules, "preTransformNode");
  postTransforms = pluckModuleFunction(options.modules, "postTransformNode");

  delimiters = options.delimiters;

  const stack = [];
  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) {
    if (!warned) {
      warned = true;
      warn(msg, range);
    }
  }

  function closeElement(element) {
    trimEndingWhitespace(element);
    if (!inVPre && !element.processed) {
      element = processElement(element, options);
    }
    // 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);
        }
        addIfCondition(root, {
          exp: element.elseif,
          block: element,
        });
      } else if (process.env.NODE_ENV !== "production") {
        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 }
        );
      }
    }
    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;
      }
    }

    // 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;
    }
    // apply post-transforms
    for (let i = 0; i < postTransforms.length; i++) {
      postTransforms[i](element, options);
    }
  }

  function trimEndingWhitespace(el) {
    // remove trailing whitespace node
    if (!inPre) {
      let lastNode;
      while (
        (lastNode = el.children[el.children.length - 1]) &&
        lastNode.type === 3 &&
        lastNode.text === " "
      ) {
        el.children.pop();
      }
    }
  }

  function checkRootConstraints(el) {
    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 }
      );
    }
    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"]
      );
    }
  }

一些辅助函数。

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;

这里调用了一个方法parseHTML，用于解析HTML字符串，之后又传入了一些类似hooks的方法。
进入parseHTML。

parseHTML

const stack = []
const expectHTML = options.expectHTML
const isUnaryTag = options.isUnaryTag || no
const canBeLeftOpenTag = options.canBeLeftOpenTag || no
let index = 0
let last, lastTag

定义了一些变量。

while (html) {
    last = html
    // Make sure we're not in a plaintext content element like script/style
    if (!lastTag || !isPlainTextElement(lastTag)) {
      let textEnd = html.indexOf('<')
      if (textEnd === 0) {
        // Comment:
        if (comment.test(html)) {
          const commentEnd = html.indexOf('-->')

          if (commentEnd >= 0) {
            if (options.shouldKeepComment) {
              options.comment(html.substring(4, commentEnd), index, index + commentEnd + 3)
            }
            advance(commentEnd + 3)
            continue
          }
        }

        // http://en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_comment
        if (conditionalComment.test(html)) {
          const conditionalEnd = html.indexOf(']>')

          if (conditionalEnd >= 0) {
            advance(conditionalEnd + 2)
            continue
          }
        }

        // Doctype:
        const doctypeMatch = html.match(doctype)
        if (doctypeMatch) {
          advance(doctypeMatch[0].length)
          continue
        }

        // End tag:
        const endTagMatch = html.match(endTag)
        if (endTagMatch) {
          const curIndex = index
          advance(endTagMatch[0].length)
          parseEndTag(endTagMatch[1], curIndex, index)
          continue
        }

        // Start tag:
        const startTagMatch = parseStartTag()
        if (startTagMatch) {
          handleStartTag(startTagMatch)
          if (shouldIgnoreFirstNewline(startTagMatch.tagName, html)) {
            advance(1)
          }
          continue
        }
      }

      let text, rest, next
      if (textEnd >= 0) {
        rest = html.slice(textEnd)
        while (
          !endTag.test(rest) &&
          !startTagOpen.test(rest) &&
          !comment.test(rest) &&
          !conditionalComment.test(rest)
        ) {
          // < in plain text, be forgiving and treat it as text
          next = rest.indexOf('<', 1)
          if (next < 0) break
          textEnd += next
          rest = html.slice(textEnd)
        }
        text = html.substring(0, textEnd)
      }

      if (textEnd < 0) {
        text = html
      }

      if (text) {
        advance(text.length)
      }

      if (options.chars && text) {
        options.chars(text, index - text.length, index)
      }
    } else {
      let endTagLength = 0
      const stackedTag = lastTag.toLowerCase()
      const reStackedTag = reCache[stackedTag] || (reCache[stackedTag] = new RegExp('([\\s\\S]*?)(</' + stackedTag + '[^>]*>)', 'i'))
      const rest = html.replace(reStackedTag, function (all, text, endTag) {
        endTagLength = endTag.length
        if (!isPlainTextElement(stackedTag) && stackedTag !== 'noscript') {
          text = text
            .replace(/<!\--([\s\S]*?)-->/g, '$1') // #7298
            .replace(/<!\[CDATA\[([\s\S]*?)]]>/g, '$1')
        }
        if (shouldIgnoreFirstNewline(stackedTag, text)) {
          text = text.slice(1)
        }
        if (options.chars) {
          options.chars(text)
        }
        return ''
      })
      index += html.length - rest.length
      html = rest
      parseEndTag(stackedTag, index - endTagLength, index)
    }

    if (html === last) {
      options.chars && options.chars(html)
      if (process.env.NODE_ENV !== 'production' && !stack.length && options.warn) {
        options.warn(`Mal-formatted tag at end of template: "${html}"`, { start: index + html.length })
      }
      break
    }
  }

一个while循环，不停地去寻找html字符串中出现<的位置。
如果<出现的位置是第一个，先会判断是不是style标签、script标签、textArea标签等，如果是这些标签会有特殊的处理，如果不是就会去解析html字符串中的注释节点、Doctype标签、闭合标签、开始标签，在解析这些html结构中最终都会调用advance方法。advance可以改变html字符串的长度。
如果<出现的位置不是第一个，就说明其中有文本节点，之后就是解析文本节点的逻辑。我们先来看看advance的内容。

advance的定义可以在下面找到。

function advance (n) {
    index += n
    html = html.substring(n)
  }

将当前的解析索引前进n步，并且截断html字符串前面已解析的部分。也就是说在while循环内，只要命中一次规则，就会解析一部分，解析完毕后又会将索引向后移到未解析的位置，并且截断前面所有解析过的部分。所以html字符串会越来越短，直至解析完毕，完全消失。

分析完advance方法后，接下来我们来分析一下几个比较重要的编译过程。

开始标签的编译

开始标签的编译在parse函数中的while内：

// Start tag:
const startTagMatch = parseStartTag()
if (startTagMatch) {
  handleStartTag(startTagMatch)
  if (shouldIgnoreFirstNewline(startTagMatch.tagName, html)) {
    advance(1)
  }
  continue
}

先看看命中规则parseStartTag方法：

const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z${unicodeRegExp.source}]*`
const qnameCapture = `((?:${ncname}\\:)?${ncname})`
const startTagOpen = new RegExp(`^<${qnameCapture}`)

function parseStartTag () {
  const start = html.match(startTagOpen)
  if (start) {
    const match = {
      tagName: start[1],
      attrs: [],
      start: index
    }
    advance(start[0].length)
    let end, attr
    while (!(end = html.match(startTagClose)) && (attr = html.match(dynamicArgAttribute) || html.match(attribute))) {
      attr.start = index
      advance(attr[0].length)
      attr.end = index
      match.attrs.push(attr)
    }
    if (end) {
      match.unarySlash = end[1]
      advance(end[0].length)
      match.end = index
      return match
    }
  }
}

首先使用正则匹配html字符串中的开始标签的开始符号——<，如果有匹配到，就定义一个返回结果对象，tagName为标签名，attrs为属性，start为开始的索引值。
然后调用advance前进start[0].length步。之后就是使用循环来完成这个返回结果对象。
回到parse函数继续查看开始标签的编译过程。
如果命中了开始标签的匹配规则，就调用handleStartTag。我们来看一下handleStartTag的实现：

function handleStartTag (match) {
    const tagName = match.tagName
    const unarySlash = match.unarySlash

    if (expectHTML) {
      if (lastTag === 'p' && isNonPhrasingTag(tagName)) {
        parseEndTag(lastTag)
      }
      if (canBeLeftOpenTag(tagName) && lastTag === tagName) {
        parseEndTag(tagName)
      }
    }

    const unary = isUnaryTag(tagName) || !!unarySlash

    const l = match.attrs.length
    const attrs = new Array(l)
    for (let i = 0; i < l; i++) {
      const args = match.attrs[i]
      const value = args[3] || args[4] || args[5] || ''
      const shouldDecodeNewlines = tagName === 'a' && args[1] === 'href'
        ? options.shouldDecodeNewlinesForHref
        : options.shouldDecodeNewlines
      attrs[i] = {
        name: args[1],
        value: decodeAttr(value, shouldDecodeNewlines)
      }
      if (process.env.NODE_ENV !== 'production' && options.outputSourceRange) {
        attrs[i].start = args.start + args[0].match(/^\s*/).length
        attrs[i].end = args.end
      }
    }

    if (!unary) {
      stack.push({ tag: tagName, lowerCasedTag: tagName.toLowerCase(), attrs: attrs, start: match.start, end: match.end })
      lastTag = tagName
    }

    if (options.start) {
      options.start(tagName, attrs, unary, match.start, match.end)
    }
  }

拿到刚刚从parseStartTag从的返回结果tagName（标签名称）、unarySlash（一元标签符）。
使用变量unary存储这个标签是否为一元标签。
接下来是解析html属性，具体就不用看了。
然后有个判断，如果当前标签不是一元标签的话就在stack中入栈当前的标签信息。这个stack标签栈是用于检查当前模板的标签闭合匹配情况的，之后在编译闭合标签的方法中可以得到体现。
最后调用了一次options传入的hookstart，这部分我们放在下一篇中去分析hook。

闭合标签的编译

闭合标签的编译在parse函数的while循环内：

const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`)
const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z${unicodeRegExp.source}]*`
const qnameCapture = `((?:${ncname}\\:)?${ncname})`

//End tag:
const endTagMatch = html.match(endTag)
if (endTagMatch) {
	const curIndex = index
	advance(endTagMatch[0].length)
	parseEndTag(endTagMatch[1], curIndex, index)
	continue
}

先使用正则判断是不是闭合标签的格式。如果匹配到了就先使用advance函数前进endTagMatch[0].length步，然后调动用parseEndTag编译闭合标签：

  function parseEndTag (tagName, start, end) {
    let pos, lowerCasedTagName
    if (start == null) start = index
    if (end == null) end = index

    // Find the closest opened tag of the same type
    if (tagName) {
      lowerCasedTagName = tagName.toLowerCase()
      for (pos = stack.length - 1; pos >= 0; pos--) {
        if (stack[pos].lowerCasedTag === lowerCasedTagName) {
          break
        }
      }
    } else {
      // If no tag name is provided, clean shop
      pos = 0
    }

    if (pos >= 0) {
      // Close all the open elements, up the stack
      for (let i = stack.length - 1; i >= pos; i--) {
        if (process.env.NODE_ENV !== 'production' &&
          (i > pos || !tagName) &&
          options.warn
        ) {
          options.warn(
            `tag <${stack[i].tag}> has no matching end tag.`,
            { start: stack[i].start, end: stack[i].end }
          )
        }
        if (options.end) {
          options.end(stack[i].tag, start, end)
        }
      }

      // Remove the open elements from the stack
      stack.length = pos
      lastTag = pos && stack[pos - 1].tag
    } else if (lowerCasedTagName === 'br') {
      if (options.start) {
        options.start(tagName, [], true, start, end)
      }
    } else if (lowerCasedTagName === 'p') {
      if (options.start) {
        options.start(tagName, [], false, start, end)
      }
      if (options.end) {
        options.end(tagName, start, end)
      }
    }
  }

在这个方法中可以看出，编译器会遍历stack标签栈，找到最近一个的开始标签，如果当前这个闭合标签不匹配最近一个开始标签，就会报错：tag <${stack[i].tag}> has no matching end tag.，相信这个报错有很多童鞋都遇到过。

文本节点的编译

let text, rest, next
if (textEnd >= 0) {
  rest = html.slice(textEnd)
  while (
    !endTag.test(rest) &&
    !startTagOpen.test(rest) &&
    !comment.test(rest) &&  
    !conditionalComment.test(rest)
  ) {
    // < in plain text, be forgiving and treat it as text
    next = rest.indexOf('<', 1)
    if (next < 0) break
    textEnd += next
    rest = html.slice(textEnd)
  }
  text = html.substring(0, textEnd)
}

if (textEnd < 0) {
  text = html
}

if (text) {
  advance(text.length)
}

if (options.chars && text) {
  options.chars(text, index - text.length, index)
}

如果命中testEnd >= 0就说明现在的html字符串不是以<为开头的，就表示其中有文本。文本然后编译器就会截取<后面的部分。为了防止在文本内也会有<内容，这里编译器写了一个循环去跳过这些文本中的<部分，保证最后截取到的rest必须是闭合标签开始后剩余的部分。
之后截取文本部分，赋值给text变量，用于之后AST的构建。

之后还有一个判断if (textEnd < 0)，这个判断如果命中了，就说明这个html字符串之后全部都是文本了，已经没有任何标签了，于是直接就把html赋值给了text文本内容。再调用advance将游标前进到文本节点之后。最后再使用调用charshook将文本内容添加到AST上（hook的内容我们放在下一篇中去分析）。

总结

总体来说，parse的代码量非常的多，主要集中在parseHTML方法。如果不忽略非主线代码的话，看起来非常的吃力，同时这部分我感觉我个人可能分析的不是很到位。

爱学习的前端小黄
关注
vue 源码学习系列 一 - vue构建
lt3487928的专栏
08-10 473
最近在学习vue的源码，顺便在博客中记录一下学习历程。 首先安装vue-cli和vue，这里不多做介绍。 安装完成后vue目录如下：   vue是通过rollup构建的，构建同时选择flow作为js类型检测工具，这里不多做介绍。 打开工程根目录下面的package.json 里面部分内容如下： 红框框内的3句命令分别构建web版本，服务端版本和weex版本vue这里我们只分析w...
vue生命周期 —— 模板编译
七月
06-30 491
Vue 的 template 是如何编译成真正的 HTML 并做到双向绑定等等特殊功能的呢？ 在这张图中，我们可以看到 Vue 的模板编译是在 $mount 的过程中进行的，在 $mount 的时候执行了 compile 这个方法来将 template 里的内容转换成真正的 HTML 代码。complie 之后执行的事情也蛮重要的，这个我们留到最后再说。complie 最终生成 render 函数，等待调用。这个方法分为三步： parse 函数解析 template optimize 函数优化静态
v-runtime-template 项目教程
最新发布
gitblog_00634的博客
08-16 362
v-runtime-template 项目教程 v-runtime-templateVue component for compiling templates on the fly using a v-html like API项目地址:https://gitcode.com/gh_mirrors/vr/v-runtime-template 1. 项目的目录结构及介绍 v-runtime-tem...
vue源码系列 视频
11-07
vue源码解析第2部分第1节 了解render、数据驱动 内容完整
【前端】vue 报错:The template root requires exactly one element
程序员-张师傅
07-25 2046
在 Vue.js 中，当你遇到错误 “The template root requires exactly one element” 时，这通常意味着你的 Vue 组件的模板（template）根节点不是单一的元素。Vue 要求每个组件的模板必须有一个根元素来包裹所有的子元素。如果你的模板看起来像这样，就会出现这个错误：
Vue学习之源码分析--Vue.js响应式原理（一）
心暖未晴
10-19 615
关于Vue.jsVue.js是一款MVVM框架，上手快速简单易用，通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty，尤大大在Vue.js文档中就已经提到过，这也是Vue.js不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集，而每个setter方法
大白话Vue源码系列目录
weixin_33901641的博客
12-20 96
.first-level{ font-size: 1.2rem; cursor: default; color: #666; } .second-level{ font-size: 1.1rem; padding-left: 2.4rem; } .order-number{ ...
Vue源码系列 - 前言
Vito LI
06-27 192
Vue源码系列 前言 - Why 离职前立了 flag，希望正式入职之后可以在组内进行一次 Vue 的源码分享。为了让小旗子不要那么容易就倒下，也希望自己能有所收获，努力来总结一些自己的心得。 参考资料 [1] Vue 源码 （源码是必须的） [2] Vue 技术内幕 (作者去更新 Vue3 了，本文已停止维护) [3] Vue.js 技术揭秘 （作者在慕课网开了课 - Vue.js 源码揭秘） ...
Vue3源码分析——编译模块和编译器
厦门在乎科技
10-30 732
Vue3的编译模块包含4个目录： compiler-core // 编译核心 Compiler-DOM // 浏览器相关 Compiler-sfc // 单文件组件 Compiler-SSR // 服务端渲染 其中，compiler-core模块是Vue编译的核心模块，与平台无关。其余三个基于compiler-core，适用于不同的平台。 Vue的编译分为三个阶段，即解析(Parse)、转换(Transform)和代码生成(Codegen)。 Parse阶段将模板字符串转换为语法抽象树...
vue 模板解析成html,Vue.js 源码学习七 —— template 解析过程学习
weixin_32641973的博客
06-19 1255
这次，来学习下Vue是如何解析HTML代码的。template 解析用在哪从之前学习 Render 的过程中我们知道，template 的编译在 $mount 方法中出现过。// src/platforms/web/entry-runtime-with-compiler.jsconst mount = Vue.prototype.$mountVue.prototype.$mount = funct...
Vue源码剖析-模板编译
shenzhenya的博客
01-20 419
Vue源码剖析-模板编译
Vue 模板编译详解：从$mount到compile
Vue的编译过程分为多个阶段，包括解析（parse）、优化（optimize）和代码生成（generate）。下面我们将详细探讨Vue中的compile操作方法及其背后的原理。 首先，Vue实例化时，如果使用了`$mount`方法挂载到DOM元素上...
【Vue】理解Vue源码系列（一）
jzq950522的博客
06-28 401
深入理解Vue源码，才是真正的使用Vue。我们可能用Vue开发了很多项目，但并不知道Vue框架中的原理，这样我们只会是一个Api调用师。理解一些框架的源码，帮助我们去设计、开发出更高质量的代码，这是一个真正工程师的必要技能。接下来，我们开启Vue源码探究之旅。 本次Vue源码系列的Vue版本为2.6.10，所有的讨论都是围绕着这个版本的Vue展开的。 我们先来看Vue源码目录，Vue源码都在src...
vue html标签编译,javascript – VueJS在内联模板组件中重新编译HTML
weixin_35826493的博客
06-10 259
我将bootstrapTable(https://github.com/wenzhixin/bootstrap-table)包装成一个指令,如下所示：Vue.directive('bootstraptable', {priority: 1000,params: ['url', 'resource-name'],bind: function () {var _self = this;$(this.e...
从源码理解 Vue 模板编译
weixin_33714884的博客
01-21 220
Vue 的 template 是如何编译成真正的 HTML 并做到双向绑定等等特殊功能的呢？以往这个问题对我来说一直是个黑洞。最近看了 Vue 的源码，对模板编译的整个过程的脉络有了更为清晰的了解。 先甩一张图 在这张图中，我们可以看到 Vue 的模板编译是在 $mount 的过程中进行的，在 $mount 的时候执行了 compile ...
vue源码学习（四）模板编译之解析器
zxl1990_ok的博客
11-30 380
function set (target, key, val) { if (isUndef(target) || isPrimitive(target) { console.warn(("Cannot set reactive property on undefined, null, or primitive value: " + ((target)))); } if (Array.isArray(target) && isValidArrayInd.
vue源码parse研究
风烟
11-26 682
vue源码中parse就是把template解析为ast的过程。 AST Abstract Syntax Tree（抽象语法树的意思） 比如 <div>test</div> 写为抽象语法树 { tag:'div', type :1 , children:[ { type:3, text:'test...
Vue源码解析
qq_42179237的博客
02-02 1374
参考资料 vue3.0源码下载地址 vue2.6.12源码下载地址 一 源码学习目录 vue3.0目录 目录结构 package：源码目录，Vue3 的源码存放在这里面 scripts：Vue3 的脚本文件，用来存放配置文件，进行编译和打包 test-tds：测试文件 package ├─packages # 源码目录，Vue3 的源码存放在这里面 │ ├─compiler-core # 与模板编译相关的代码 │ ├─compiler-dom
Vue源码分析系列：目录
hd101367816的博客
02-24 1056
数据驱动篇： 源码分析：data的代理 源码分析：$mount执行过程 源码分析：render的执行过程 源码分析：createElement的执行过程 源码分析：patch的执行过程 总结：new Vue的过程 组件化： 源码分析：createComponent的执行过程 源码分析：组件的patch过程 源码分析：合并配置 源码分析：组件注册 响应式原理： 源码分析：构建响应式对象 原理解析：理解Dep类和Watcher类 源码分析：依赖收集 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

爱学习的前端小黄

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值