vuejs源码阅读之代码生成器

news/2024/11/22 17:54:25/

代码生成器是模版编译的最后以后,它的作用是将AST转换成渲染函数中的内容,这个内容可以称为代码字符串。

代码字符串可以被包装在函数中执行,这个函数就是我们通常说的渲染函数。

渲染函数被执行之后,可以生成一份VNode,而虚拟DOM可以通过这个VNode来渲染视图。

AST生成代码字符串

比如下面这个代码。

<div id="el">hello {{name}}
</div>

它转换成AST并且经过优化器的优化之后是下面这个样子。

{"type": 1,"tag": "div","attrsList": [{"name": "id","value": "el","start": 5,"end": 12}],"attrsMap": {"id": "el"},"rawAttrsMap": {"id": {"name": "id","value": "el","start": 5,"end": 12}},"children": [{"type": 2,"expression": "\"\\n        hello \"+_s(name)+\"\\n    \"","tokens": ["\n        hello ",{"@binding": "name"},"\n    "],"text": "\n        hello {{name}}\n    ","start": 13,"end": 41,"static": false}],"start": 0,"end": 47,"plain": false,"attrs": [{"name": "id","value": "\"el\"","start": 5,"end": 12}],"static": false,"staticRoot": false
}

代码生成器可以通过上面这个AST来生成代码字符串,生成后的代码字符串。

with (this) {return _c('div',{ attrs: { "id": "el" } },[_v("\n        hello " + _s(name) + "\n    ")])
}

仔细观察生成后的代码字符串,这是一个嵌套的函数调用。函数_c的参数中执行了函数_v,而_v的参数中又执行了_s。

这个字符串中_c其实是createElement的别名。createElement是虚拟DOM中所提供的方法,它的作用是创建虚拟节点,有三个参数,分别是:

  • 标签名
  • 一个包含模版相关属性的数据对象
  • 子节点列表
    调用createElement方法,我们可以得到一个VNode。

这也就是是渲染函数可以生成VNode的原因:渲染函数其实是执行了createElement,而createElement可以创建一个VNode。


http://www.ppmy.cn/news/991507.html

相关文章

C++ | unordered_map与unordered_set的用法指南

目录 前言 一、unordered_set 1、简介 2、构造相关函数 3、容量相关函数 4、修改与查找相关接口 5、迭代器 二、unordered_map 1、简介 2、构造相关函数 3、容量相关接口 4、迭代器、查找与修改相关接口 5、方括号接口 三、红黑树系列与哈希系列对比 前言 unorde…

在centos 7系统docker上构建mysql 5.7

一、VM上已经安装centos 7.9&#xff0c;且已完成docker的构建 二、安装mysql5.7 安装镜像&#xff1a;[rootlocalhost lll]# docker pull mysql:5.7 查看镜像[rootlocalhost lll]# docker images 根据镜像id构建mysql容器&#xff0c;且分配端口号[rootlocalhost lll]# dock…

COMSOL三维Voronoi图泰森多边形3D模型轴压模拟及建模教程

多晶体模型采用三维Voronoi算法生成&#xff0c;试件尺寸为150150300mm棱柱模型&#xff0c;对晶格指定五种不同材料&#xff0c;实现晶格间的差异性。 对试件进行力学模拟&#xff0c;下侧为固定边界&#xff0c;限制z方向的位移&#xff0c;上表面通过给定位移的方式实现轴…

POI的简单入门

POI的简单入门 导入jar包将数据写入Excel文件读取Excel文件中的数据 导入jar包 Apache POI的maven坐标 <dependency><groupId>org.apache.poi</groupId><artifactId>poi</artifactId><version>3.17</version> </dependency>…

新房的收房验房注意事项

文章目录 流程注意事项准备检查材料手续整体结构验收水电检测门窗结构地面工程墙面工程顶面工程阳台厨房卫生间户外设施 流程注意事项 只要发现问题&#xff0c;不管大小&#xff0c;都要在相关文件或表格中记录下来&#xff0c;而不管开发商以及陪同的收房人员如何花言巧语。…

Vue(待续)

概念 一套用于构建用户界面的渐进式JavaScript框架 Vue可以自底向上逐层的应用&#xff1a; 简单应用:只需一个轻量小巧的核心库。 复杂应用:可以引入各式各样的Vue插件。 1.采用组件化模式&#xff0c;提高代码复用率、且让代码更好维护。 2.声明式编码&#xff0c;让编码人员…

开源项目-erp企业资源管理系统(毕设)

哈喽,大家好,今天给大家带来一个开源项目-erp企业资源管理系统,项目通过ssh+oracle技术实现。 系统主要有基础数据,人事管理,采购管理,销售管理,库存管理,权限管理模块 登录 主页 基础数据 基础数据有商品类型,商品,供应商,客户,仓库管理功能

双人报数小游戏,指定总数,每人每次报1或2,全部相加,最后一个人报数为赢

游戏玩法&#xff1a; 两人轮流报数&#xff0c;每次智能报1或者2&#xff0c;把两个人报的所有数加起来&#xff0c;谁报数后和为10&#xff0c;谁就获胜。必赢游戏 比赢策略 游戏本质要赢需要看总数和谁先开始报数&#xff0c;结合才能确定谁能赢&#xff0c;程序依靠随机…