编译

爱被打了一巴掌 2022-05-14 04:11 105阅读 0赞

之前我们分析过模板到真实    DOM    渲染的过程，中间有⼀个环节是把模板编译成        render        函数，这个 过程我们把它称作编译。 虽然我们可以直接为组件编写        render        函数，但是编写        template        模板更加直观，也更符合我们的 开发习惯。 Vue.js    提供了    2    个版本，⼀个是    Runtime    +    Compiler    的，⼀个是    Runtime    only    的，前者是包含编译代码 的，可以把编译过程放在运⾏时做，后者是不包含编译代码的，需要借助    webpack    的        vue-loader        事 先把模板编译成        render    函数。 这⼀章我们就来分析编译的过程，对编译过程的了解会让我们对    Vue    的指令、内置组件等有更好的理 解。不过由于编译的过程是⼀个相对复杂的过程，我们只要求理解整体的流程、输⼊和输出即可，对 于细节我们不必抠太细。有些细节⽐如对于        slot        的处理我们可以在之后去分析插槽实现的时候再详 细分析。

## 编译⼊⼝  ##

![70][]

![70 1][]

![70 2][]

![70 3][]

![70 4][]

![70 5][]

![70 6][]

那么接下来的章节我会带⼤家去逐步分析这⼏个过程。

总结

编译⼊⼝逻辑之所以这么绕，是因为    Vue.js    在不同的平台下都会有编译的过程，因此编译过程中的依 赖的配置        baseOptions        会有所不同。⽽编译过程会多次执⾏，但这同⼀个平台下每⼀次的编译过程 配置⼜是相同的，为了不让这些配置在每次编译过程都通过参数传⼊，Vue.js    利⽤了函数柯⾥化的技巧 很好的实现了        baseOptions        的参数保留。同样，Vue.js    也是利⽤函数柯⾥化技巧把基础的编译过程 函数抽出来，通过        createCompilerCreator(baseCompile)        的⽅式把真正编译的过程和其它逻辑如 对编译配置处理、缓存处理等剥离开，这样的设计还是⾮常巧妙的。

## parse ##

![70 7][]

![70 8][]

![70 9][]

![70 10][]

![70 11][]

![70 12][]

![70 13][]

![70 14][]

![70 15][]

![70 16][]

![70 17][]

![70 18][]

![70 19][]

![70 20][]

![70 21][]

![70 22][]

![70 23][]

![70 24][]

![70 25][]

## 流程图 ##

![70 26][]

总结

那么⾄此，    parse        的过程就分析完了，看似复杂，但我们可以抛开细节理清它的整体流程。    parse    的⽬标是把        template        模板字符串转换成    AST    树，它是⼀种⽤    JavaScript    对象的形式来描述整个模 板。那么整个        parse        的过程是利⽤正则表达式顺序解析模板，当解析到开始标签、闭合标签、⽂本 的时候都会分别执⾏对应的回调函数，来达到构造    AST    树的⽬的。 AST    元素节点总共有    3    种类型，    type        为    1    表⽰是普通元素，为    2    表⽰是表达式，为    3    表⽰是纯⽂ 本。其实这⾥我觉得源码写的不够友好，这种是典型的魔术数字，如果转换成⽤常量表达会更利于源 码阅读。 当    AST    树构造完毕，下⼀步就是        optimize        优化这颗树。

## optimize ##

![70 27][]

![70 28][]

![70 29][]

![70 30][]

![70 31][]

## codegen ##

![70 32][]

![70 33][]

![70 34][]

![70 35][]

![70 36][]

![70 37][]

![70 38][]

![70 39][]

![70 40][]

![70 41][]

![70 42][]

![70 43][]

![70 44][]

![70 45][]

![70 46][]

![70 47][]

![70 48][]

![70 49][]

![70 50][]

![70 51][]

![70 52][]

![70 53][]

![70 54][]

![70 55][]

![70 56][]

![70 57][]

![70 58][]

![70 59][]

⾮常经典的事件中⼼的实现，把所有的事件⽤        vm.\_events        存储起来，当执⾏        vm.$on(event,fn)    的时候，按事件的名称        event        把回调函数        fn        存储起来        vm.\_events\[event\].push(fn)    。当执⾏    vm.$emit(event)        的时候，根据事件名        event        找到所有的回调函数        let    cbs    = vm.\_events\[event\]    ，然后遍历执⾏所有的回调函数。当执⾏        vm.$off(event,fn)        的时候会移除指 定事件名        event        和指定的        fn        当执⾏        vm.$once(event,fn)        的时候，内部就是执⾏        vm.$on    ，并 且当回调函数执⾏⼀次后再通过        vm.$off        移除事件的回调，这样就确保了回调函数只执⾏⼀次。 所以对于⽤户⾃定义的事件添加和删除就是利⽤了这⼏个事件中⼼的    API。需要注意的事⼀ 点，    vm.$emit        是给当前的        vm        上派发的实例，之所以我们常⽤它做⽗⼦组件通讯，是因为它的回 调函数的定义是在⽗组件中，对于我们这个例⼦⽽⾔，当⼦组件的        button        被点击了，它通过    this.$emit('select')        派发事件，那么⼦组件的实例就监听到了这个        select        事件，并执⾏它的 回调函数——定义在⽗组件中的        selectHandler        ⽅法，这样就相当于完成了⼀次⽗⼦组件的通讯。 总结 那么⾄此我们对    Vue    的事件实现有了进⼀步的了解，Vue    ⽀持    2    种事件类型，原⽣    DOM    事件和⾃定义 事件，它们主要的区别在于添加和删除事件的⽅式不⼀样，并且⾃定义事件的派发是往当前实例上派 发，但是可以利⽤在⽗组件环境定义回调函数来实现⽗⼦组件的通讯。另外要注意⼀点，只有组件节 点才可以添加⾃定义事件，并且添加原⽣    DOM    事件需要使⽤        native        修饰符；⽽普通元素使⽤    .native        修饰符是没有作⽤的，也只能添加原⽣    DOM    事件。

[70]: /images/20220514/c04aa05abcd9403b94d97d573b339981.png
[70 1]: /images/20220514/929796d4564a42899ba1c4f39c1dc8f7.png
[70 2]: /images/20220514/1cb9771ab2914096b3fabd52d9e8df65.png
[70 3]: /images/20220514/5189d3034e844643b3be14bd36bb2df8.png
[70 4]: /images/20220514/5e6b273565dd433b8274abfe7afe12ac.png
[70 5]: /images/20220514/94c3dec48dbd4a5db5f4ca3d0ce0f00e.png
[70 6]: /images/20220514/36e3f8bfb5ab4d4294974508fbe8e821.png
[70 7]: /images/20220514/2c2f6a15f66848ee8193d27ecd2fb170.png
[70 8]: /images/20220514/c720af6914ae44b5bf8dfb7239e8c8f6.png
[70 9]: /images/20220514/ffda66ff93d0433189354b689ceedd3b.png
[70 10]: /images/20220514/e866808bd5594ab8bc6d42f8b048f22b.png
[70 11]: /images/20220514/21bc51d1824d4ad6aa90f2ddf49fa6b2.png
[70 12]: /images/20220514/a507982186404660a38ce539103d31a9.png
[70 13]: /images/20220514/4e0a5b8f08b942038a96f41408ff8a07.png
[70 14]: /images/20220514/49e10713ba7b45a7934965426300a325.png
[70 15]: /images/20220514/f4ee767f226a4b7abb8837833ce0b868.png
[70 16]: /images/20220514/617848afaa764e6a8190322437e6b988.png
[70 17]: /images/20220514/ff461ae19f6f4208a7578a45db32c7a9.png
[70 18]: /images/20220514/d6375c52a19e46cea0451dc5d5ba2678.png
[70 19]: /images/20220514/345fbc7467a745d6af79cbe57b5daef6.png
[70 20]: /images/20220514/697c3198c98944eeb5e50aa9698921fa.png
[70 21]: /images/20220514/e979fe03526a4072813432ab1896366e.png
[70 22]: /images/20220514/3c570c701ab4412fb9dcc9c6f336edd1.png
[70 23]: /images/20220514/40cb7b0bc61f4bee9e766dd2937235af.png
[70 24]: /images/20220514/db9ce8e21de34641b94f74492126d992.png
[70 25]: /images/20220514/fb71e57ddb1a4b3dad1dc4acd0816963.png
[70 26]: /images/20220514/4a6cf1b68b764c3f9487c915a0dd4481.png
[70 27]: /images/20220514/113d67a0f06748b48d634ef92128b852.png
[70 28]: /images/20220514/bfd41298218d43e09004ed63b4b344e2.png
[70 29]: /images/20220514/b4f68c5d593e4ac1ac5689baa0ea433e.png
[70 30]: /images/20220514/7a11e488f1204f8184a114ccfb132969.png
[70 31]: /images/20220514/66a2fd0f8dea4f56899ff6c7c1064726.png
[70 32]: /images/20220514/75922e4f5d2245ecaba7942533a6c3f5.png
[70 33]: /images/20220514/5edebdbeb0404bba9464615306defaf2.png
[70 34]: /images/20220514/b4e56c3979f7435fba7e2ff7c0c38353.png
[70 35]: /images/20220514/d7d130fe17ae47afa91612e0a23d63bc.png
[70 36]: /images/20220514/cdf65cd819f648caaf9e4c68bbe26191.png
[70 37]: /images/20220514/b902b11e8ff9438d8318dcae25801165.png
[70 38]: /images/20220514/450646a83d074b71b0011cfced06fd41.png
[70 39]: /images/20220514/ec4b38a7277a4f428f0c8718f7b82a5c.png
[70 40]: /images/20220514/f0d5299a8e04457f9c8ee8a1a2f85cda.png
[70 41]: /images/20220514/ca3388d8fa284df5a43f22fb31e08bd9.png
[70 42]: /images/20220514/7d6ec925dbb04d3fa8da5b402d767286.png
[70 43]: /images/20220514/80691abe7f77447b82f5d360b4883afd.png
[70 44]: /images/20220514/f86aebf10409442580f43a301da590ab.png
[70 45]: /images/20220514/ff305b4508a5459fa149f881fb3efad0.png
[70 46]: /images/20220514/c1246ccd7c5d4935b42b95d80ec01bf8.png
[70 47]: /images/20220514/8f89c24a27d74d149b9afa6877745663.png
[70 48]: /images/20220514/1fc272148b4048beaf0f62178c22ae46.png
[70 49]: /images/20220514/f54b7d92ba1347419f920b449233e622.png
[70 50]: /images/20220514/990990ff3147464996a6d3fc005a3f32.png
[70 51]: /images/20220514/3d373fd707284b2aab2ed9a60510c84d.png
[70 52]: /images/20220514/9408ea6ac41a417590ae9084ae6fd669.png
[70 53]: /images/20220514/3db9ade87eec4423a9127e1b450437c5.png
[70 54]: /images/20220514/34c6f9751a324e5da17c31d184a592da.png
[70 55]: /images/20220514/6b81af6f63bc435a988d0167779790d7.png
[70 56]: /images/20220514/4e00932a35a34c63bcbc3ed5d88489af.png
[70 57]: /images/20220514/e9e75d36fb9d4597ac62569be48647dc.png
[70 58]: /images/20220514/7f05d74bf95e4539b46cb165d8301e65.png
[70 59]: /images/20220514/c317468f8a3a400894bb0c7a97936355.png