vue源码解读--event（原生事件-codegen）

目录导航

本节沿用上一节的示例代码

上一节我们通过parse过程，拿到了完整的ast tree。本节我们继续探索一下，事件的ast树将被转换为怎样的render code

codegen

    通过之前编译章节的分析，我们知道，ast后将走generate函数对ast tree进行加工处理，调用genElement函数，传入ast tree

        A-框红，由于本节只关注事件逻辑，故未添加其他如class、once、for等feture，故跳到框红的位置，执行genData

（由于该函数逻辑判断过于多，而本节只关注events的处理，故将其剪切）

                el.events存在，调用genHandlers函数

                框红一的位置，prefix值为on:

                框红二的位置，对events进行遍历，并调用genHandler将事件描述对象传入，返回onRootConsole或function($event){return onRootConsole($event)}，然后向staticHandlers拼接参数并最终拼接到prefix上返回

                on:{"click":function($event){return onRootConsole($event)}}

                或

                on:{"click":onRootConsole}

                框红三的位置，是对一个事件多个回调的处理

                最后返回gendata，并将prefix返回

（故框红的执行结果为prefix）

                框红二的位置，则对应本次的示例，返回value，即onRootConsole

                框红三的位置，则是对在回调中以调用的形式传入$event的返回。如onRootConsole($event)，返回值为function($event){return onRootConsole($event)}，这也是我们能在回调中获取事件对象的原因

    B-框绿，对子元素进行处理，对应我们的button节点，调用genChildren

                拿到button节点，执行框红的位置，getNormalizationType用于将数组拍平，返回0

                调用genNode函数，并将该函数的返回值拼接到结果数组中返回

               当前type为1，故调用genElement，再次执行到genData并调用genHandlers，返回on:{"click":function($event){$event.stopPropagation();$event.preventDefault();return onConsole($event)}}即gendata的返回值。再次执行到框绿的位置调用genChildren，由于button中还有文本节点，故会再次执行genNode创建一个文本节点

                 返回_v("click me")

                返回genChildren，return的code为[_v("click me")]

                返回genElement，return的code为

               此时div的genChildren执行完毕，返回到div的genElement，并最终返回code

---

目录导航