资讯专栏INFORMATION COLUMN

Vue源码解析:模版字符串转AST语法树

chengjianhua / 1683人阅读

摘要:通过对源码阅读,想写一写自己的理解,能力有限故从尤大佬第一次提交开始读,准备陆续写模版字符串转语法树语法树转函数双向绑定原理虚拟比较原理其中包含自己的理解和源码的分析,尽量通俗易懂由于是的最早提交,所以和最新版本有很多差异,后续将陆续补充,

通过对 Vue2.0 源码阅读,想写一写自己的理解,能力有限故从尤大佬2016.4.11第一次提交开始读,准备陆续写:

模版字符串转AST语法树

AST语法树转render函数

Vue双向绑定原理

Vue虚拟dom比较原理

其中包含自己的理解和源码的分析,尽量通俗易懂!由于是2.0的最早提交,所以和最新版本有很多差异、bug,后续将陆续补充,敬请谅解!包含中文注释的Vue源码已上传...

问题

什么是AST?
AST(abstract syntax tree)意为抽象语法树,其实就是树形数据结构的表现形式,有父节点、子节点、兄弟节点等概念...

本身就是树形结构的HTML为什么还要转化?
因为真实DOM含不需要的属性太多了,如果筛选出我们需要的属性,再对其进行操作,将大大优化性能!

AST和虚拟节点vnode有什么关系?
它们结构很相似,AST其实算得上是vnode的前身,AST经过一系列的指令解析、数据渲染就会变成vnode!这边的AST其实只是简单的html解析。

开始

举个

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/54690.html

相关文章

  • Vue源码解析模版符串AST语法

    摘要:通过对源码阅读,想写一写自己的理解,能力有限故从尤大佬第一次提交开始读,准备陆续写模版字符串转语法树语法树转函数双向绑定原理虚拟比较原理其中包含自己的理解和源码的分析,尽量通俗易懂由于是的最早提交,所以和最新版本有很多差异,后续将陆续补充, 通过对 Vue2.0 源码阅读,想写一写自己的理解,能力有限故从尤大佬2016.4.11第一次提交开始读,准备陆续写: 模版字符串转AST语法...

    王伟廷 评论0 收藏0
  • Vue源码解析AST语法render函数

    摘要:源码解析这边解析的是从树转换成函数部分的源码,由于第一次提交的源码这部分不全,故做了部分更新,代码全在文件夹中。入口整个语法树转函数的起点是文件中的函数明显看到,函数传入参数为语法树,内部调用函数开始解析根节点容器节点。 通过对 Vue2.0 源码阅读,想写一写自己的理解,能力有限故从尤大佬2016.4.11第一次提交开始读,准备陆续写: 模版字符串转AST语法树 AST语法树转r...

    trilever 评论0 收藏0
  • Vue源码解析AST语法render函数

    摘要:源码解析这边解析的是从树转换成函数部分的源码,由于第一次提交的源码这部分不全,故做了部分更新,代码全在文件夹中。入口整个语法树转函数的起点是文件中的函数明显看到,函数传入参数为语法树,内部调用函数开始解析根节点容器节点。 通过对 Vue2.0 源码阅读,想写一写自己的理解,能力有限故从尤大佬2016.4.11第一次提交开始读,准备陆续写: 模版字符串转AST语法树 AST语法树转r...

    Karuru 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<