记录-Vue.js模板编译过程揭秘:从模板字符串到渲染函数

这篇具有很好参考价值的文章主要介绍了记录-Vue.js模板编译过程揭秘:从模板字符串到渲染函数。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录-Vue.js模板编译过程揭秘:从模板字符串到渲染函数

Vue.js是一个基于组件化和响应式数据流的前端框架。当我们在Vue中编写模板代码时,它会被Vue编译器处理并转换为可被浏览器解析的JavaScript代码。Vue中的模板实际上是HTML标记和Vue指令的组合,它们会被Vue编译器处理并转化为一个JavaScript渲染函数。

Vue中的模板编译分为两个阶段:

1.解析阶段

在这个阶段,Vue将模板字符串解析为AST(抽象语法树)的结构。解析器会扫描模板字符串,识别出其中的HTML标签、属性、表达式等内容,然后构建成一个抽象语法树。这个过程中也会对表达式进行解析和优化,以生成更高效的渲染函数。

例如,下面是一个简单的Vue模板:

<div>
  <h1>{{ title }}</h1>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

在解析阶段,Vue将这个模板解析为AST的结构:

{
  type: 'element',
  tag: 'div',
  attrsList: [],
  children: [
    {
      type: 'element',
      tag: 'h1',
      attrsList: [],
      children: [{ type: 'expression', expression: 'title' }]
    },
    {
      type: 'element',
      tag: 'ul',
      attrsList: [],
      children: [
        {
          type: 'element',
          tag: 'li',
          attrsList: [{ name: 'v-for', value: 'item in items' }],
          children: [{ type: 'expression', expression: 'item' }]
        }
      ]
    }
  ]
}

2.代码生成阶段

在这个阶段,Vue将AST转换为渲染函数。渲染函数是一个JavaScript函数,它接收一个上下文对象作为参数,并返回一个VNode(虚拟节点)对象,表示要渲染的DOM树结构。在渲染函数中,Vue会将模板中的HTML标签转换为createElement函数调用,将指令和表达式转换为相应的JavaScript代码。

例如,对于上面的模板,生成的渲染函数大致如下:

function render(_ctx, _cache) {
  return _openBlock(), _createBlock("div", null, [
    _createVNode("h1", null, _toDisplayString(_ctx.title), 1 /* TEXT */),
    _createVNode("ul", null, [
      (_cache[item] || (_cache[item] = _withDirectives((_openBlock(), _createBlock("li", {
        key: item
      }, _toDisplayString(item), 1 /* TEXT */)), [[_directive_resolveModel, _ctx.items, item]])))
    ])
  ])
}

在上面的渲染函数中,我们可以看到通过调用Vue提供的_createVNode函数和_createBlock函数来创建虚拟节点,并使用_toDisplayString函数来将表达式的值转换为字符串。同时,在循环中使用了_cache对象来缓存已渲染的VNode,以提高渲染性能。

总的来说,Vue的模板编译过程将模板字符串转换为一个JavaScript函数,该函数接收一个上下文对象作为参数,并返回一个VNode对象,表示要渲染的DOM树结构。这个过程中,Vue将模板中的HTML标记和指令转换为JavaScript函数调用,同时对表达式进行解析和优化,以生成更高效的渲染函数。

举一个更具体的例子,考虑下面这个Vue模板:

<template>
  <div class="wrapper">
    <h1>{{ message }}</h1>
    <ul>
      <li v-for="item in items">{{ item }}</li>
    </ul>
  </div>
</template>

在编译过程中,Vue将模板字符串解析为AST的结构,如下所示:

{
  type: 'element',
  tag: 'div',
  attrsList: [{ name: 'class', value: 'wrapper' }],
  children: [
    {
      type: 'element',
      tag: 'h1',
      attrsList: [],
      children: [{ type: 'expression', expression: 'message' }]
    },
    {
      type: 'element',
      tag: 'ul',
      attrsList: [],
      children: [
        {
          type: 'element',
          tag: 'li',
          attrsList: [{ name: 'v-for', value: 'item in items' }],
          children: [{ type: 'expression', expression: 'item' }]
        }
      ]
    }
  ]
}

然后,Vue将AST转换为一个渲染函数,如下所示:

function render(_ctx, _cache) {
  return _openBlock(), _createBlock("div", { class: "wrapper" }, [
    _createVNode("h1", null, _toDisplayString(_ctx.message), 1 /* TEXT */),
    _createVNode("ul", null, [
      (_cache[item] || (_cache[item] = _withDirectives((_openBlock(), _createBlock("li", {
        key: item
      }, _toDisplayString(item), 1 /* TEXT */)), [[_directive_resolveModel, _ctx.items, item]])))
    ])
  ])
}
在渲染函数中,我们可以看到Vue将HTML标记转换为_createVNode_createBlock函数的调用,将指令和表达式转换为相应的JavaScript代码,并使用_toDisplayString函数将表达式的值转换为字符串。最终生成的渲染函数会被Vue用来渲染组件的实例。

本文转载于:

https://juejin.cn/post/7221354195914326073

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录-Vue.js模板编译过程揭秘:从模板字符串到渲染函数文章来源地址https://www.toymoban.com/news/detail-413286.html

到了这里,关于记录-Vue.js模板编译过程揭秘:从模板字符串到渲染函数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • P3375 【模板】KMP 字符串匹配

    给出两个字符串 s 1 s_1 s 1 ​ 和 s 2 s_2 s 2 ​ ,若 s 1 s_1 s 1 ​ 的区间 [ l , r ] [l, r] [ l , r ] 子串与 s 2 s_2 s 2 ​ 完全相同,则称 s 2 s_2 s 2 ​ 在 s 1 s_1 s 1 ​ 中出现了,其出现位置为 l l l 。 现在请你求出 s 2 s_2 s 2 ​ 在 s 1 s_1 s 1 ​ 中所有出现的位置。 定义一个字符串 s s s 的

    2024年02月14日
    浏览(54)
  • 8-tornado中模板的使用(通过字符串返回、通过模板Template返回、通过模板render返回)、模板案例

    tornado.template 一个简单的模板系统,将模板编译为Python代码。 基本用法如下 * 前端 后端

    2024年02月04日
    浏览(38)
  • JDK 21 发布,新特性概览及字符串模板详细介绍

    Java 21 已于 2023 年 9 月 19 日发布,是 Oracle 标准 Java 实现的下一个长期支持(LTS)版本。Java 21 具有以下 15 项新特性。 430: String Templates (Preview) 字符串模板,可以像其他语言那样子方便的做字符串拼接,是+号,StringBuilder,MessageFormat之外更方便的字符串拼接方法。 431: Sequenc

    2024年02月02日
    浏览(55)
  • js删除字符串中的指定字符串

    `replace()` 将字符串中的指定子字符串替换为新的字符串。         如果删除指定的子字符串,可以将它替换为空字符串。 删除str中的“World”,结果为:   2.1 删除字符串中的所有匹配的子字符串 删除str中所有的“Hello”,结果为: 2.2 删除字符串中的第一个匹配的子字符

    2024年02月10日
    浏览(47)
  • 【Go基础】编译、变量、常量、基本数据类型、字符串

    面试题文档下链接点击这里免积分下载 go语言入门到精通点击这里免积分下载 使用 go build 1.在项目目录下执行 2.在其他路径下编译 go build ,需要再后面加上项目的路径(项目路径从GOPATH/src后开始写起,编译之后的可执行文件就保存再当前目录) 3.打包的时候自定义名字:

    2024年02月09日
    浏览(58)
  • js如何截取某个字符串前面所有的字符串

    利用substring()方法截取出字符 1.新建一个字符串 2.通过indexOf()方法获取你想截止到的那个字符 3.通过substring()方法,从字符串0位置开始截取至\\\"p\\\"前面的字符串

    2024年02月12日
    浏览(55)
  • JS中字符串切割为数组/数组拼接为字符串

    (1)语法格式: 其中所选分隔符使用双引号(“”)或者单引号(‘’)括起来; 所生成的数组会存放于前面定义的数组变量中。 (2)样例: JS代码: 运行结果: (3)其他用法: ①当所选分隔符为空时,返回的数组即将每个字符分割出来: JS代码: 运行结果: ②分隔

    2024年02月12日
    浏览(58)
  • js字符串

    1.字符串的概述 字符串基础数据类型属于值类型,值类型是不可以改变的。字符串的相关方法是不能改变原本的字符串的,以返回一个新的字符串做为对应的特性。字符串也是一个数据结构(存储结构)数据结构名叫做串(字符串一块组成的一个串),那么他就具备增删改查

    2024年02月05日
    浏览(36)
  • js截取字符串

    1、 split() 方法用于把一个 字符串 分割成 字符串数组 2、 slice() 可提取字符串的某个部分,并以新的字符串返回被提取的部分 3、substring() 提取字符串中介于两个指定下标之间的字符 4、join() 把数组中的所有元素转换一个字符串 5、 charAt() 返回指定位置的字符 https://blog.csdn.

    2024年02月15日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包