vue源码
文章平均质量分 68
关于vue源码
Continue丶
努力变得更好一点
展开
-
Vue源码:抽象语法树
文章目录概述实现概述在vue模板编译的整个过程,我们可知如下template字符串生成抽象语法树ast,ast通过渲染函数生成虚拟节点,最后才生成真实UI。本篇主要是关于template转换生成抽象语法树,关于后续过程可移步虚拟DOM和DIFF算法实现设置移动指针,判断剩余字符串是开始标签还是结束标签或文字,通过两个栈来保存标签名与容器,遇到开始标签则标签入栈1,生成容器入栈2,遇到文字填充栈2顶内容,闭合则将栈2顶内容移入栈顶前一容器。parse.jsimport parseAttrStr原创 2021-10-28 15:50:33 · 459 阅读 · 0 评论 -
Vue源码:虚拟DOM和DIFF算法
文章目录简介虚拟DOM简介虚拟DOM是用对象的形式来模拟DOM的结构,通过虚拟DOM前后的对比来动态更新对应的真实DOM,从而大大提高DOM更新的效率。DIFF算法是进行虚拟DOM对比的一种高效算法虚拟DOM一个虚拟DOM就是一个对象,用来表示一个DOM节点的结构,其属性有sel:标签名data:标签属性(class、id、props、src等)children:子...原创 2021-10-22 16:51:01 · 149 阅读 · 0 评论 -
Vue源码:mustache模板解析
文章目录什么是模板引擎数据变为视图的方法手写mustache运行流程什么是模板引擎模板引擎是将数据变为视图最优雅的解决方案,如下可以通过左侧数据最终在网页上渲染成右侧dom视图数据变为视图的方法历史上出现的数据变为视图的方法有四种:纯DOM法、数组join法、ES6反引号法、mustache模板引擎法,可以说越来越优雅。如下数据采用各种方法渲染 <div> <ul class="list"> </ul> <原创 2021-10-16 23:56:27 · 193 阅读 · 0 评论