vue源码流程图
2020-09-22 21:26:42 0 举报AI智能生成
vue源码流程图
作者其他创作
大纲/内容
核心代码：
src\core\index.js
1:初始化全局API
src\core\index.js
1:初始化全局API
1:实现构造函数
src\core\instance\index.js
src\core\instance\index.js
1:initMixin(vue)
//给vue创建实例方法
//给vue创建实例方法
1:合并选项 options
2:初始化逻辑
1:initLifecycle()//绑定$parent/$root/$children
2:initEvents() //事件监听
3:initRender() //创建render函数
4:callHook(vm, 'beforeCreate') //组件创建之前的钩子
5:initInjections(vm) // 注入祖辈传递的数据
6:initState(vm) //组件数据化初始
1:创建_watchers
2:属性initProps()
3:方法initMethods()
4:数据响应处理initData(data)
1:data是函数直接执行
2:校验//data不能在Method，props中出现
3：代理proxy()
4:响应处理observe()
执行过程中，出现一个对象，就创建一个Observer，
挂载一个__ob__属性,
有就直接返回ob
执行过程中，出现一个对象，就创建一个Observer，
挂载一个__ob__属性,
有就直接返回ob
1:isArray//如果式数组，走原型覆盖 src\core\observer\array.js
2:obj//遍历处理
1:创建每个ket对应的小管家dep
2:如果是对象，递归处理继续observe
//返回childOb实例
//返回childOb实例
3:defineReactive
1:get()
1:dep.depend()
//实际执行的是watcher的adddep()
//依赖收集dep与watcher是n对n的关系
//实际执行的是watcher的adddep()
//依赖收集dep与watcher是n对n的关系
1:addDep()
//如果没有保存过关系，就保存
//创建watcher和dep的关系
//如果保存过了，反向创建dep和watcher的关系
//如果没有保存过关系，就保存
//创建watcher和dep的关系
//如果保存过了，反向创建dep和watcher的关系
2：childOb
//便利的对象是obj，递归返回
//主要用未来对象可能有属性的增删，数组元素的增删
//便利的对象是obj，递归返回
//主要用未来对象可能有属性的增删，数组元素的增删
1:dep.depend()
//对象内部的小管家要和当前的wathcer建立关系
//也创建子ok与wathcer关系
//对象内部的小管家要和当前的wathcer建立关系
//也创建子ok与wathcer关系
2:set()
1:设置值，赋值
2:如果有新对象，observe
3:通知更新dep.notigy()
5:initComputed
6:initWatch
7:initProvide(vm) // 继承
8:callHook(vm, 'created') //创建完成
3:执行$mount //如果设置了el
扩展$mount方法（解析el，template，生成渲染函数）
文件：entry-runtime-with-compiler.js
文件：entry-runtime-with-compiler.js
src\platforms\web\runtime\index.js
1.声明patch函数
2.实现$mount方法，执行挂载
1.声明patch函数
2.实现$mount方法，执行挂载
创建一个mountComponent()
2:stateMixin(Vue)
//实现$set,$delete,$watch
//实现$set,$delete,$watch
1:$set
src\core\observer\index.js
src\core\observer\index.js
1：如果是数组，判断key是否数据响应过，有直接返回val
2：如果是对象，判断key是否数据响应过，有直接返回val
3：执行defineReactive
4：通知更新dep.notigy()
2:$delete
src\core\observer\index.js
src\core\observer\index.js
1：如果是数组且做过响应处理，直接 splice()
2：如果是对象，则delete，
3：通知更新dep.notigy()
3:$watch
3:eventsMixin(Vue)
//事件相关$emit/$on/$off/$once
//事件相关$emit/$on/$off/$once
4:lifecycleMixin(Vue)////生命周期相关 _update $forceUpdate $destroy
根组件的创建，伴随着创建一个watcher
5:renderMixin(Vue)//render相关发放$nextTick,_render
0 条评论
下一页
