vue 数值 拼接字符串_【Vue原理】Compile - 白话版
写文章不容易,点个赞呗兄弟 专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧 研究基于 Vue版本 【2.5.17】
如果你觉得排版难看,请点击 下面链接 或者 拉到 下面关注公众号也可以吧
【Vue原理】Compile - 白话版
终于到了要讲 compile 白话的时候了,大家准备好了吗,白话版肯定不会很复杂啦,源码版就不一定了。。。
源码版我写了9篇啊!每篇的篇幅都很长啊!!我都快写奔溃了啊!!
都快坚持不下来了,我算了算, compile 的源码版,我好像快写了一个多月???
卧槽,竟然写了这么久.....
好吧,现在开始我们的正文
Compile
compile 的内容非常多,大致分为三块主要内容,我也称他们是Vue的 渲染三巨头
就是 parse,optimize,generate
虽然分为三块,但是要明确一点
compile 的作用是解析模板,生成渲染模板的 render
比如这样的模板
经过 compile 之后,就会生成下面的 render
_c('div', [_c('span'), _v(num)])
而 render 的作用,也是为了生成跟模板节点一一对应的 Vnode
{ tag: "div", children:[{ tag: "span", text: undefined},{ tag: undefinedtext: "111"}]
}
下面我们就来一个个看渲染三巨头
Parse
这是 compile 的第一个步骤
作用是
接收 template 原始模板,按照模板的节点 和数据 生成对应的 ast
比如这样
生成的 ast 是这样,所有模板中出现的数据,你都可以在 ast 中找到
{ tag: "div", attrsMap: {test: "2"}, children:[{ tag: "span", children: [], attrsMap: {name: "1"}}]
}
ast 是什么?个人简单理解的话
以数据的形式去描述一个东西的所有的特征吧,说错别打我
比如说ast 描述我
{ name: "神仙朱", sex: 1,desc: "一个靓仔"}
具体可以查一下,相关内容挺多的
另外,这里不会讲细节,parse 是怎么生成 ast 的,因为涉及很多源码,放在源码版了
Optimize
这是 compile 的第二步
作用是
遍历递归每一个ast节点,标记静态的节点(没有绑定任何动态数据),
这样就知道那部分不会变化,于是在页面需要更新时,减少去比对这部分DOM
从而达到性能优化的目的
比如这个模板
span 和 b 就是静态节点,在 optimize 处理中,就会给他们添加 static 判断是否是静态节点
{ static: false, staticRoot: false, tag: "div", children: [{ staticRoot: true, tag: "span", children: [{ static: true, tag: "b"}]},{ static: false, text: "{{a}}"}]
}
而你也看到一个属性,staticRoot,这个是表示这个节点是否是静态根节点的意思
用来标记 某部分静态节点 最大的祖宗节点,后面更新的时候,只要碰到这个属性,就知道他的所有子孙节点都是静态节点了,而不需要每个子孙节点都要判断一次浪费时间
具体是怎么做的,感兴趣的话欢迎看以后的源码版
Generate
这是 compile 的第三步
作用是
把前两步生成完善的 ast 组装成 render 字符串(这个 render 变成函数后是可执行的函数,不过现在是字符串的形态,后面会转成函数)
看个例子
经过前两步变成 ast
{ static: false, staticRoot: false, tag: "div", children: [{ static: false, staticRoot: false, tag: "span", children: [{ static: false, text: "{{b}}"}]},{ static: false, text: "{{a}}"}]
}
然后,generate 接收 ast,先处理最外层 ast,然后开始递归遍历子节点,直到所有节点被处理完
这个过程中,字符串会被一点一点拼接完成,比如上面的 ast 拼接结果就是下面这样
_c 是生成节点对应的 Vnode 的一个函数
`
_c('div', [_c('span', [_v(b)]),_v(a)
])
`
简单说一下拼接流程
1、一开始接收到 ast,处理最外层 ast 这个点,是 div,于是拼接得到字符串
code = ` _c('div', [ `
2、遍历 div 子节点,遇到 span,拼接在 div 的子节点数组中
code = `_c('div', [ _c('span', [ `
3、开始处理 span 的子节点 b,放进 span 的 子节点数组中
code = ` _c('div', [ _c('span', [ _v(b) `
4、span 子节点处理完,闭合 span 的 子节点数组
code = ` _c('div', [ _c('span', [ _v(b) ] `
5、继续处理 span 同级 的子节点,是个文本节点,但是是动态值,变量是 a
code = `_c('div', [ _c('span', [ _v(b) ] , _v(a) `
6、所有子节点都处理完毕,闭合 div 的 子节点数组
code = ` _c('div', [ _c('span', [ _v(b) ] , _v(a) )] `
render转成函数
前面两步把 template 解析生成了 render 字符串,但是需要执行的话,还是需要转换成函数的
怎么转呢?就是下面这样
render = new Function(render)
然后 render 保存在实例上,具体位置是
vm.$options.render
至此,compile 所有的功能就完成了
而关于 render 的内容,比如说 render 中出现的各种函数是什么,会专门放在 render 的文章去记录
vue 数值 拼接字符串_【Vue原理】Compile - 白话版相关推荐
- android string拼接字符串_为什么阿里巴巴不建议在循环体中使用+进行字符串拼接?...
之前在阅读<阿里巴巴Java开发手册>时,发现有一条是关于循环体中字符串拼接的建议,具体内容如下: 那么我们首先来用例子来看看在循环体中用 + 或者用 StringBuilder 进行字符 ...
- c++ 指针拼接字符串_字符串拼接+和concat的区别
+和concat都可以用来拼接字符串,但在使用上有什么区别呢,先来看看这个例子. public static void main(String[] args) {// example1String s ...
- android string拼接字符串_「JAVA」细述合理创建字符串,分析字符串的底层存储,你不该错过...
Java基础之字符串操作--String 字符串 什么是字符串?如果直接按照字面意思来理解就是多个字符连接起来组合成的字符序列.为了更好的理解以上的理论,我们先来解释下字符序列,字符序列:把多个字符按 ...
- python 路径拼接字符串_字符串游戏之拼接字符串
出场人物介绍 小美:小学4年级学生,参加了学校的编程兴趣小组,已经了解了Python语言的基本语法,能够看懂一些简单的程序.她做事风风火火,对所有的事物都很好奇,喜欢打破砂锅问到底,是一个叫人又爱又恨 ...
- 雷达原理第五版微盘pdf下载_雷达原理(第5版电子信息类精品教材)
基本信息商品名称:雷达原理(第5版电子信息类精品教材) 作者:丁鹭飞//耿富录//陈建春 定价:69.8 出版社:电子工业 ISBN号:9787121226236 其他参考信息(以实物为准)出版时间: ...
- Python 循环拼接字符串_详解Python拼接字符串的七种方式
更多优质内容请关注「AI 应用前沿」 拥抱人工智能,并没有想象的那么难,每天懂一点就已经上路了[给力] Value的比较符号用双等号"==",上例中比较l1和l2的Value要写成 ...
- vue快速复制快捷键_⌨️ Vue项目给应用优雅的绑定快捷键
想必各位前端看官也一定做过这样的需求,给我们的应用某些主要的功能绑定一个快捷键.尤其是工具类的产品,让用户可以使用快捷键操作,能大大提高工具使用效率. 如何绑定快捷键 聪明的你也想到了,Vue 官方文 ...
- vue 获取id元素_.vue组件中获取DOM元素问题
一.问题引入 原项目把一块内容直接写在了模块中(浏览器显示的一整个页面),现在想把它提成一个单独组件,而且把其中使用document.getElementById('id')改为ref获取元素的形式. ...
- mysql 触发器拼接字符串_触发器 字符串拼接函数
##触发器 触发时间 before after 触发事件 insert update delete 等 create table score_log select * from score where ...
最新文章
- 我为什么晚上写代码?
- 4702: 分糖果系列一
- 启用日志调试Kerberos登录验证问题
- 微信小程序打开PDF
- Qt中的QWidget
- javascript中对变量类型的判断
- 【笔记】Java 信任所有SSL证书(解决PKIX path building failed问题)
- 利用wordpress搭建自己的网站(百度云虚拟主机)
- 视频课程:高等数学考研辅导讲座-上
- 网易面试总结(2014.12.31)
- 2022-2028全球智能门锁系统行业调研及趋势分析报告
- 如果你觉得自己对 CSS 变量不熟悉,那么可以补充这个!
- SQL出现MSDB置疑
- Slot-Gated Modeling for Joint Slot Filling and Intent Prediction论文笔记
- 关于 BBBB 站视频删除问题解释
- PHPMyWind教程:增加上传类型
- 好网线与坏网线的区别,教你几招鉴别技巧
- lightroom初学
- Echarts 图表生成渐变色方法
- 如何 SolidWorks 减小文件大小?
热门文章
- maven项目调试debug错误Source not found.
- Maven打包自动发布到nexus私服
- Eclipse构建Maven分包分模块项目并构建服务端
- android 手机wifi重启,路由器要不要每天重启?多亏宽带师傅透露,难怪网速一天比一天慢!...
- 计算机win7无法安装,新机装不了Win7?照这个方法5分钟搞定!
- 计算机桌面壁纸怎样拉伸,win10桌面壁纸怎么拉伸?手把手教你拉伸win10桌面壁纸的方法...
- php和java 2017_Php与java的区别
- MySQL高级 —— 查询性能优化
- LeetCode算法入门- Merge Two Sorted Lists -day15
- mlag 堆叠_S-MLAG解决方案介绍