首页 > 资讯 > 前端开发 > JavaScript >一文带你吃透Vue3编译原理

653

分享到

一文带你吃透Vue3编译原理

Vue3编译原理 Vue 编译原理 Vue3编译 2023-02-09 12:02:47 653人浏览泡泡鱼

摘要

目录主要流程parse的实现baseParseparseElementparseText总结一直对编译原理的东西都有一种恐惧感，感觉太难了，看不懂，打开vue3源码看到编译相关的代码

主要流程

现在我们就来一起分析一个简易的vue3的编译原理。一句话概括一下我们想要实现的功能，那就是将template模板生成我们想要的render函数即可。简单的一句话却蕴含着大量的知识。

<div>hi, {{message}}</div>

最后生成

import { toDisplayString as _toDisplayString, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue"

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", null, "hi, " + _toDisplayString(_ctx.message), 1 ))
}

首先template会通过词法分析、语法分析解析成AST(抽象语法树)，然后利用transfORM对AST进行优化，最后通过generate模块生成我们想要的render函数。

在vue3的源码中主要分成了3个部分（以下是简化后的源码）

export function baseCompile(template){
  const ast = baseParse(template)
  transform(ast)
  return generate(ast)
}

通过parse将template生成ast
通过transform优化ast
通过generate生成render函数

由于这3个部分牵扯的东西比较多，我们这篇文章主要来讲解一下parse的实现(友情提示：为了让大家刚好的理解，本文的代码全部都是精简过得哦)

parse的实现

我们就拿一个简单的例子入手

<div><p>hi</p>{{message}}</div>

看似一个简单的例子，其实3种类型：element、text、插值。我们将这三种类型用枚举定义一下。

const enum nodeTypes {
  ROOT,
  INTERPOLATION,
  SIMPLE_EXPRESSION,
  ELEMENT,
  TEXT
}

ROOT类型表示根节点，SIMPLE_EXPRESSION类型表示插值的内容。最后我们想要通过parse生成一个ast。

{
    type: NodeTypes.ROOT
    children: [
        {
          type: NodeTypes.ELEMENT,
          tag: "div",
          children: [
            {
              type: NodeTypes.ELEMENT,
              tag: "p",
              children: [
                {
                  type: NodeTypes.TEXT,
                  content: "hi"
                }
              ]
            },
            {
              type: NodeTypes.INTERPOLATION,
              content: {
                type: NodeTypes.SIMPLE_EXPRESSION,
                content: "message"
              }
            }
          ]
        }
    ]
}

基于源码我们可以知道ast是由函数baseParse生成。那我们就从这个函数入手。

baseParse

export function baseParse(content: string) {
  const context = createParseContext(content)
  return createRoot(parserChildren(context, []))
}

function createParseContext(content: string) {
  return {
    source: content
  }
}

function createRoot(children) {
  return {
    children,
    type: NodeTypes.ROOT
  }
}

首先创建一个全局的上下文对象context,并且存储了source。source就是我们传入的模板内容。接着创建根节点，包含了type和children。而children是由parseChildren创建。

parseChildren

function parseChildren(context, ancestors) {
  const nodes: any = []

  while (!isEnd(context, ancestors)) {
    const s = context.source
    let node
    if (s.startsWith("{{")) {
      node = parseInterpolation(context)
    } else if (s[0] === "<") {
      if (/[a-z]/i.test(s[1])) {
        node = parseElement(context, ancestors)
      }
    } else {
      node = parseText(context)
    }
    nodes.push(node)
  }
  return nodes
}

parseChildren是负责解析子节点并创建ast节点数组。parseChildren是自顶向下分析各个子节点的，对于模板内容要从左到右依次解析。每当碰到一个element节点都要递归的调用parseChildren去解析它的子节点。当碰到{{则认为需要处理的是插值节点，当碰到<则认为需要处理的是element节点，其余的则统一认为处理的是text节点。每处理完一个节点都会生成node并push到nodes中，最后返回nodes当做是父ast节点的children属性。

当然从左到右依次循环解析就一定要有一个退出循环的条件isEnd

function isEnd(context, ancestors) {
  const s = context.source

  if (s.startsWith("</")) {
    for (let i = 0; i < ancestors.length; i++) {
      const tag = ancestors[i]
      if (startsWithEndTaGopen(s, tag)) {
        return true
      }
    }
  }

  return !s
}
function startsWithEndTagOpen(source, tag) {
  return (
    source.startsWith("</") &&
    source.slice(2, 2 + tag.length).toLowerCase() === tag.toLowerCase()
  )
}

ancestors表示element标签的集合，大致的意思就是当碰到了结束标识符</,并且结束标签（source.slice(2, 2 + tag.length)）和element标签的集合中的标签匹配则说明当前的element节点处理完毕，则退出循环

下面我们就来看一下插值节点parseInterpolation、element节点parseElement和文本节点parseText分别是怎么处理的

parseInterpolation

function parseInterpolation(context) {
  const openDelimiter = "{{"
  const closeDelimiter = "}}"

  const closeIndex = context.source.indexOf(
    closeDelimiter,
    openDelimiter.length
  )

  advanceBy(context, openDelimiter.length)

  const rawContentLength = closeIndex - openDelimiter.length

  const rawContent = parseTextData(context, rawContentLength)

  const content = rawContent.trim()
  advanceBy(context, closeDelimiter.length)

  return {
    type: NodeTypes.INTERPOLATION,
    content: {
      type: NodeTypes.SIMPLE_EXPRESSION,
      content
    }
  }
}

function advanceBy(context: any, length: number) {
  context.source = context.source.slice(length)
}

function parseTextData(context: any, length) {
  const content = context.source.slice(0, length)

  advanceBy(context, content.length)
  return content
}

我们主要是为了获取插值的内容然后返回一个插值对象即可。closeIndex表示“}}”所在的位置。advanceBy函数的功能是推进。比如"{{"是不需要处理的，那么就直接把它截取掉。rawContentLength代表“{{”和“}}”中间内容的长度，通过parseTextData获取“{{”和“}}”中间的内容，并返回。然后把中间内容的部分做推进。由于我们写代码习惯可能会给内容的前后做留白，所以需要用trim做处理。然后把最后的“}}”推进，返回一个插值类型的对象即可。

parseElement

function parseElement(context, ancestors) {
  const element: any = parseTag(context, TagType.Start)
  ancestors.push(element)
  element.children = parseChildren(context, ancestors)
  ancestors.pop()

  if (startsWithEndTagOpen(context.source, element.tag)) {
    parseTag(context, TagType.End)
  } else {
    throw new Error(`缺少结束标签: ${element.tag}`)
  }

  return element
}

function parseTag(context: any, type: TagType) {
  const match: any = /^<\/?([a-z]*)/i.exec(context.source)
  const tag = match[1]
  advanceBy(context, match[0].length)
  advanceBy(context, 1)

  if (type === TagType.End) return

  return {
    type: NodeTypes.ELEMENT,
    tag
  }
}

function startsWithEndTagOpen(source, tag) {
  return (
    source.startsWith("</") &&
    source.slice(2, 2 + tag.length).toLowerCase() === tag.toLowerCase()
  )
}

parseElement第二个参数ancestors是一个数组来收集标签的（作用在上面的isEnd已经提到了）。通过parseTag获取标签名，parseTag通过正则拿到标签名然后返回一个标签对象，处理过的内容继续做推进。如果是结束标签则什么都不做。然后通过parseChildren递归的处理element的子节点。然后对结束标签进行处理，startsWithEndTagOpen判断是够存在结束标签，如果不存在则报错。

parseText

function parseText(context: any): any {
  let endIndex = context.source.length
  let endToken = ["<", "{{"]

  for (let i = 0; i < endToken.length; i++) {
    const index = context.source.indexOf(endToken[i])
    if (index !== -1 && endIndex > index) {
      endIndex = index
    }
  }

  const content = parseTextData(context, endIndex)

  return {
    type: NodeTypes.TEXT,
    content
  }
}

endIndex表示内容长度（此时内容的长度是已经推进过的字符到最后一个字符的长度）。比如

<div>hi,{{message}}</div>

能够进入到parseText函数中说明开始标签已经处理过了，所以context.source应该是

hi,{{message}}</div>

所以endIndex的长度应该是上面代码的长度。当碰到”<“或者”{{“的时候，则我们需要改变endIndex的值，比如上面的代码，我们想要拿到的文本内容应该是hi,,所以当碰到”{{“时，改变endIndex然后通过parseTextData拿到文本内容，返回一个文本对象。

总结

parse的作用就是将template生成ast对象。则需要对template从左到右依次处理，处理过了则进行推进，碰到element标签还需要递归处理，并把添加到element.children上，最终返回一个ast抽象语法树。

以上就是一文带你吃透Vue3编译原理的详细内容，更多关于Vue3编译原理的资料请关注编程网其它相关文章！

--结束END--

本文标题: 一文带你吃透Vue3编译原理

本文链接: https://lsjlt.com/news/195326.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

回答

如何调试操作系统的错误？
操作系统

2023-11-15发布

回答

操作系统中的I/O系统是如何实现的？
操作系统

2023-11-15发布

回答

如何实现操作系统的内存管理？
操作系统

2023-11-15发布

回答

什么是虚拟内存，它对操作系统有什么影响？
操作系统

2023-11-15发布

回答

ASP中的MVC架构和WebForms架构有什么区别和使用场景？
ASP.NET

2023-11-15发布

回答

ASP中的数据验证和数据校验有什么不同？
ASP.NET

2023-11-15发布

回答

ASP中的ADO对象和DAO对象有什么区别和使用方法？
ASP.NET

2023-11-15发布

回答

Node.js中的包管理器NPM是什么？如何使用它进行依赖管理？
node.js

2023-11-15发布

回答

Vue.js中的动态组件是什么？如何使用它来动态渲染组件？
VUE

2023-11-15发布

回答

如何使用Vue.js实现懒加载和预加载？
VUE

2023-11-15发布

一文带你吃透Vue3编译原理

目录

主要流程

parse的实现

baseParse

parseElement

parseText

总结

一文带你吃透Vue3编译原理

一文带你吃透Java中的String类

一篇文章带你吃透Vuex3的状态管理

【Spring】一文带你吃透AOP面向切面编程技术(上篇)

一文带你吃透Python中的os和sys模块

一文吃透Go的内置RPC原理

一文带你深入理解Vue3响应式原理

一文带你吃透什么是PHP中的序列化

一文带你吃透Python中的日期时间模块

一文吃透 Spring 中的 AOP 编程

一文带你吃透C#中面向对象的相关知识

十一个案例带你吃透Python函数参数

一文带你吃透数据库的约束，不做CRUD程序员

一文带你吃透JSP增删改查实战案例详细解读

如何使用JDBC操作数据库？一文带你吃透JDBC规范

一文带你吃透JSP，增删改查实战案例详细解读

一文搞懂vue编译器(DSL)原理

一篇文章带你吃透Vue生命周期(结合案例通俗易懂)

一篇文章带你理解ReactProps的原理

一文说透什么是MySQL的预编译

京东一面：post为什么会发送两次请求？???

鼠标划过时整行变色284607详解

鼠标划过时整行变色284415处理办法

TypeScript接口和类型的区别小结

写给小白学习的地理信息的表示法GeoJSON

vue使用Swiper踩坑解决避坑

JavaScrip简单数据类型隐式转换的实现

细说JS数组遍历的一些细节及实现

初学者如何快速搭建Express开发系统步骤详解

深入浅出JavaScript前端中的设计模式