专栏首页coding个人笔记vue渲染思路笔记

vue渲染思路笔记

之前一直不理解vue渲染过程先解析成ast之后再解析成虚拟dom是什么意思,ast和虚拟dom结构和表达的真的很像,一直觉得为什么要先解析ast,为什么不能直接变成虚拟dom。今天分享一下自己的理解,也不知道是否正确。

先说一下vue渲染过程,第一次渲染的时候要先把template解析成ast语法树,然后内部实现一个render方法进行html的字符串模板编译,接着就是通过这个render方法解析出虚拟dom,最后把虚拟dom变成真实dom。

Ast语法树,是用对象来描述原生语法。最简单的是我们原生可以通过id打印出ast语法树:

vue里面通过正则,把标签和内部的一些语法一步一步实现自己需要使用的ast,因为原生的太多了,还有之前有人评论问我HTML解析是深度优先还是广度优先,当时不能给出回答,现在觉得应该是广度优先,因为上面图片就是原生的ast语法树,是广度优先,包括dom diff算法也是。

之前有说过为什么vue要有一个且只能是一个根标签,为了方便解析,应该是由ast语法树和虚拟dom决定的。第一次渲染把template解析成语法树,其实就是render、template、el三个中的一个进行解析。

Vue内部,有了ast语法树之后,实现一个render方法,把ast变成一个字符串模板,对象和文本还要对象有三个编译方法:

_c:创建元素

_v:创建文本

_s:把对象转化成字符串,JSON.stringify变成字符串

然后通过new Function和with方法进行模板编译,有大佬说几乎所有的模板编译都要用到with。

有了render方法编译出来的模板之后,内部把这个模板方法编译之后生成虚拟dom,虚拟dom则是用对象来描述dom节点,咋一看跟ast真的很像,只是虚拟dom是自己实现的,可以更加灵活的添加和定义属性,而ast则要遵循原生的规则。

当有了虚拟dom之后,就是递归的把虚拟dom变成真实dom,然后插入到当前老节点的下面,还要把老节点删除。

Vue初始化渲染过程大概就是这样,只是内部的实现方法会复杂一些,如果是不考虑兼容写个简易的,学一学应该是能写出来,主要是思路需要好好整理。目前自己只是大概知道了一丢丢,理了理逻辑。

Coding 个人笔记

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:coding个人笔记

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-07-24

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 递归尾调用优化

    尾调用(Tail Call)是函数式编程的一个重要概念,就是指某个函数的最后一步是return调用另一个函数。

    wade
  • JavaScript简单隐式转换

    今天在帮后台写一个页面的时候,发现了一个问题,字符串的true或者false,怎么才能转换成布尔类型的?我毫不犹豫的用了Boolean,结果就是发现页面都显示的...

    wade
  • 前端性能监控API-performance

    前端监控包括性能、错误、轨迹、热点等,之前用过的也就百度统计hmjs,其它知道的也就badjs、fundebugjs、frontjs等。估计很多大公司都有自己编...

    wade
  • 四个方面,搞定前端新人面试技巧

    今天给大家分享的是我自己在找工作面试的过程中的一些小技巧,希望能够对大家有所帮助。长话短说,现在咱们说第一个,

    web前端教室
  • 53. 翻转字符串怎么说?

    思路就是把单词提取出来先存入vector里,然后再从后往前一个一个取出来。 分离单词就按照空格来分离: 遍历字符串 如果不是空格,把这个字符加到一个str...

    和蔼的zhxing
  • java中常用数据结构

    gfu
  • 2020最硬核书单

    2020年注定不平静,疫情对大家的工作、生活都产生了极大的影响和改变,也让美股连续两次熔断,更是给全球经济蒙上了一层阴影。

    用户6983566
  • 专栏 | 陈天奇等人提出AutoTVM:让AI来编译优化AI系统底层算子

    机器之心
  • 这次让我们真的读一下Workerman源码(七)

    上一节主要内容是分析Workerman进程管理相关内容的源码,今天是完结篇,主要内容是reload、fork还有monitor三部分内容。

    老李秀
  • 微服务太分散?使用Fundebug集中式bug监控

    当一个项目复杂到一定程度,功能越来越多,随之对应的模块也越来越多。 如果都放在一个大的项目下面,共同开发,整合发布,那么会变得越来越复杂,难以维护。

    Fundebug

扫码关注云+社区

领取腾讯云代金券