可以看到,本此提交 yyx 进行了一波重构,那让我们看看是怎么写的
首先 main.js

首先,把原来 self 上 _bindings 带下划线的变量改为了 bindings 没有下划线的
然后把处理 Node 节点的函数抽离到 this 中

compileNode 函数执行逻辑大体不变
然后在原型上添加 createBinding 函数,用来处理之前跟指令绑定的逻辑

其他的文件改动跟以前大差不差,某些功能抽离到外部了而已
那来梳理一下现在的执行过程

首先,执行 Seed.create,此函数内部自动执行 new Seed(opts)
获取 dom 节点,遍历子节点上的指令
绑定指令,定义对应数据的 get set 行为
给 data 中的数据赋值,在赋值的过程出发 set 函数,页面进行对应行为的渲染
至此,流程完成,到现在,我们完整了解到了 vue 最初的执行过程,后面则会进行高版本的查看,毕竟一个一个提交看还是很费时间
本文使用 文章同步助手 同步
网友评论