专栏首页Vue源码 & 前端进阶体系【Vue原理】Compile - 白话版

【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: undefined

        text: "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 的文章去记录

公众号
公众号

本文分享自微信公众号 - 神仙朱(skying-zhu)

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

原始发表时间:2019-07-09

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【前端词典】关于 Babel 你必须知道的

    我第一次打开搜索引擎查询关于 Babel 的资料时,出现的竟然是关于 Babel 的传说。后来我花了小一天的时间去了解这个传说(来自《旧约圣经》)。

    小生方勤
  • Istio 负载均衡的区域感知

    Envoy/Istio 1.1 中有个有趣的新特性:负载均衡提供了区域感知的能力。简单说来,就是在分区部署的较大规模的集群,或者公有云上,Istio 负载均衡可...

    崔秀龙
  • cplex教学 | 分支定界法(branch and bound)解带时间窗的车辆路径规划问题(附代码及详细注释)

    历尽千辛万苦,外加外援帮助,本辣鸡小编终于搞定了这个大坑-用分支定界法(Branch and bound, B&B)解带时间窗的车辆路径规划问题(VRPTW)。

    短短的路走走停停
  • (译)Calico 3.5:根据节点标签分配 IP 地址

    Calico 能够进行配置,为不同拓扑指定 IP 地址池。例如可能希望某些机架、地区、或者区域能够从同一个 IP 池中获取地址。这对于降低路由数量或者配合防火墙...

    崔秀龙
  • 解决pvc无法mount的问题

    这周遇到了两个因pvc无法attach导致pod一直没法正常启动的问题,这里记录一下解决的过程。

    jeremyxu
  • (译)Medium 的微服务架构

    微服务架构的目标是帮助工程团队安全快速地完成高质量的产品交付。良好解耦的服务能够在最小化对其它系统的影响的条件下进行快速迭代。

    崔秀龙
  • 彻底解决pvc无法mount的问题

    上周解决pvc无法mount的问题,其实留了一个尾巴,当时只是知道由于未知的原因,AttachDetachController执行detach操作失败了。这周这...

    jeremyxu
  • 如何创建 http2 node App

    openssl genrsa -des3 -out server.key 2048

    JS菌
  • 持久化储存(二)

    下载地址:https://www.mongodb.com/download-center#community

    一粒小麦
  • Istio Helm Chart 详解 —— 概述

    Helm 是目前 Istio 官方推荐的安装方式,除去安装之外,还可以利用对输入值的一些调整,完成对 Istio 的部分配置工作。官方提供了 Istio 的 H...

    崔秀龙

扫码关注云+社区

领取腾讯云代金券