![[嘿哈]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_67.9ceed33.png)
获得徽章 8
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇文章
赞了这篇沸点
5.22 - Vue源码(8)- 编译器之解析
这部分学习了近 4 天左右，只能利用碎片时间在坚持学习。只能说事太多了。（或者是自己要的目标太多了）
学习自李永宁大佬
juejin.cn + 自己总结下：
1. 编译器解析部分的本质：类 HTML 字符串模版解析成 AST 对象来表示和记录。
2. Vue 的编译器都做了什么：
--（1）将组件的 html 模版解析成 AST 对象。
--（2）优化，遍历 AST，为每个节点做静态标记（后续更新的过程中就可以跳过这些静态节点） => 标记出静态根节点（标记静态根用于生成渲染函数阶段，生成静态根节点的渲染函数）
--（3）从 AST 生成运行时的渲染函数，即大家说的 render，其实还有一个，就是 staticRenderFns 数组，里面存放了所有的静态节点的渲染函数。
3. 编译器的解析过程，怎么将 html 字符串模版变成 AST 对象
-- 遍历 HTML 模版字符串，通过正则表达式匹配 "<"
-- 跳过某些不需要处理的标签，比如：注释标签、条件注释标签、Doctype。
-- 解析开始标签
-- 解析闭合标签
-- 最后遍历完整个 html 模版字符串以后，返回 ast 对象
----- 分割线
思维导图，真的是硬做，就硬做！！太难了这部分！
这部分学习了近 4 天左右，只能利用碎片时间在坚持学习。只能说事太多了。（或者是自己要的目标太多了）
学习自李永宁大佬
juejin.cn + 自己总结下：1. 编译器解析部分的本质：类 HTML 字符串模版解析成 AST 对象来表示和记录。
2. Vue 的编译器都做了什么：
--（1）将组件的 html 模版解析成 AST 对象。
--（2）优化，遍历 AST，为每个节点做静态标记（后续更新的过程中就可以跳过这些静态节点） => 标记出静态根节点（标记静态根用于生成渲染函数阶段，生成静态根节点的渲染函数）
--（3）从 AST 生成运行时的渲染函数，即大家说的 render，其实还有一个，就是 staticRenderFns 数组，里面存放了所有的静态节点的渲染函数。
3. 编译器的解析过程，怎么将 html 字符串模版变成 AST 对象
-- 遍历 HTML 模版字符串，通过正则表达式匹配 "<"
-- 跳过某些不需要处理的标签，比如：注释标签、条件注释标签、Doctype。
-- 解析开始标签
-- 解析闭合标签
-- 最后遍历完整个 html 模版字符串以后，返回 ast 对象
----- 分割线
思维导图，真的是硬做，就硬做！！太难了这部分！
展开
1
2
赞了这篇文章