Vue源码分析思路脑图
2023-02-01 17:46:55 0 举报AI智能生成
简化文件内容，了解文件的内容原理
作者其他创作
大纲/内容
初始化流程
入口文件（src/platforms/web/entry-runtime-with-compiler.js）
web运行时代码（platforms/web/runtime/index）
实现$mount
mountComponent执行首次渲染，更新core，instance,/lifecycle.js
Vue.prototype._patch_ = inBrowser? patch:noop
全局API定义
全局API实现（src/core/global-api/index.js）
Vue构造函数定义（core/instance/index.js）
initMixin实现_init(core/instance/init.js)
initLifecycle(vm)
vm.$parent/$root/$ref/$children
initEvents(vm)
vm._event
updateComponentListenners(vm, listeners
initRender(vm)
vm._c
vm.$crateElement
beforeCreate
initInjections(vm)
resolveIniect(vm.$options.inject, vm)
definReactive(vm, key, result[key])
initState(vm)
initP[rops
initMethods
initData
initComputed
initWatch
initProvide(vm)
vm._provide
created
stateMixin定义$data,$props,$set,$delete(core/instance/state.js)
eventsMixin定义$on,$emit,$off,$once(core/instance/events.js)
lifecycleMixin定义_update,$forceUpdate,$destory(core/instance/lifecycle.js)
renderMixin定义两个实例方法$nextTick和_render(core/instance/render.js)
数据响应式
observer返回一个Obsever实例（core/observer/index.js）
Obsever对象根据类型执行对应的响应化操作（core/observer/index.js）
defineReactive定义对象属性的getter/setter（core/observer/index.js）
Dep管理一组watcher,Dep关联的值更新时通知其管理的watcher更新（core/observer/dep.js）
Watcher监控一个表达式或关联一个组件更新函数，数值更新则指定回调或更新函数被通知（core/observer/watcher.js）
s数组响应式
f覆盖数组原型（core/observer/index.js）
数组响应式的特殊处理（core/observe/index.js）
依赖收集时特殊处理（core/observe/index.js）
虚拟dom
js对象用来描述dom结构（使用diff算法来j减少dom更新操作）
编译器
编译处理
收藏
0 条评论
下一页
