Vue
2021-01-11 11:44:29 0 举报AI智能生成
Vue源码学习整理
作者其他创作
大纲/内容
初始化流程
入口文件
platforms/web/entry-runtime-with-compiler.js
platforms/web/entry-runtime-with-compiler.js
运行时
platforms/web/runtime/index.js
platforms/web/runtime/index.js
安装平台特有的补丁函数 用来做初始化和更新
Vue.prototype.__patch__ = inBrowser ? patch : noop
Vue.prototype.__patch__ = inBrowser ? patch : noop
实现$mount
初始化全局api
core/index.js
core/index.js
全局api实现
src\core\global-api\index.js
src\core\global-api\index.js
Vue的构造函数
src\core\instance\index.js
src\core\instance\index.js
实现_init
src\core\instance\init.js
src\core\instance\init.js
initLifecycle
实例属性的初始化: $parent,$root,$children,$refs
initEvents
实例属性的初始化: $parent,$root,$children,$refs
initRender
插槽解析 $slots,$scopeSlots, $createElement()
beforeCreate
initInjections
注入祖辈传递下来的数据
initState
数据响应式:props,methods,data,computed,watch
initProvide
提供给后代,用来隔代传递参数
created
执行$mount => mountComponent
src\core\instance\lifecycle.js
src\core\instance\lifecycle.js
数据响应式
observe返回一个ob实例
core/observer/index.js
core/observer/index.js
Observer对象根据数据类型执行对应的响应化操作
判断value类型,创建ob小秘书
core/observer/index.js
判断value类型,创建ob小秘书
core/observer/index.js
walk()
defineReactive()
observeArray()
defineReactive定义对象属性的getter/setter
core/observer/index.js
core/observer/index.js
Dep负责管理一组Watcher，包括watcher实例的增删及通知更新
src\core\observer\dep.js
src\core\observer\dep.js
两种dep的作用
Watcher解析一个表达式并收集依赖，当数值变化时触发回调函数
src\core\observer\dep.js
src\core\observer\dep.js
dep和watcher的映射规则
数组响应式
覆盖数组原型
src\core\observer\array.js
src\core\observer\array.js
数组响应式的特殊处理
src\core\observer\array.js
src\core\observer\array.js
依赖收集时特殊处理
src\core\observer\array.js
src\core\observer\array.js
数组打补丁
src\core\observer\array.js
src\core\observer\array.js
虚拟Dom
渲染、更新组件
mountComponent() core/instance/lifecycle.js
mountComponent() core/instance/lifecycle.js
生成虚拟dom
_render core/instance/render.js
_render core/instance/render.js
update负责更新dom，转换vnode为dom
_update core\instance\lifecycle.js
_update core\instance\lifecycle.js
__patch__是在平台特有代码中指定的
__patch__() platforms/web/runtime/index.js
__patch__() platforms/web/runtime/index.js
子主题
子主题
Vue异步更新
对修改数据触发observe的defineReactive中的set执行
例如 this.foo = xxx
src\core\observer\index.js
例如 this.foo = xxx
src\core\observer\index.js
set对应的小管家Dep通知更新notify
执行对应的watcher小秘书的update方法
src\core\observer\dep.js
执行对应的watcher小秘书的update方法
src\core\observer\dep.js
update执行时把对应的watcher放入queueWatcher队列中
src\core\observer\watcher.js
src\core\observer\watcher.js
去重,保证只有一个watcher,
调用nextTick
异步的执行flushSchedulerQueue
src\core\observer\scheduler.js
调用nextTick
异步的执行flushSchedulerQueue
src\core\observer\scheduler.js
getter就是updateComponet方法，组件更新正式执行了
updateComponent()方法主要是做了以下几点
1. 先render()=>vnode(虚拟DOM)
2. vnode=>update()=> vnode=>node
updateComponent()方法主要是做了以下几点
1. 先render()=>vnode(虚拟DOM)
2. vnode=>update()=> vnode=>node
run方法()
// 如果是组件级的watcher, 只执行get
const value = this.get()
get()执行了两件事:
1.pushTarget() 将watcher赋值给Dep.target
2.执行了this.getter方法
// 如果是组件级的watcher, 只执行get
const value = this.get()
get()执行了两件事:
1.pushTarget() 将watcher赋值给Dep.target
2.执行了this.getter方法
将回调函数存放callbacks数组,执行异步任务
src\core\util\next-tick.js
src\core\util\next-tick.js
timerFunc()
存放flushCallbacks到微任务队列,并执行微任务 flushCallbacks方法
这个flushCallbacks就是$nextTick中传入的flushSchedulerQueue
src\core\util\next-tick.js
存放flushCallbacks到微任务队列,并执行微任务 flushCallbacks方法
这个flushCallbacks就是$nextTick中传入的flushSchedulerQueue
src\core\util\next-tick.js
flushSchedulerQueue()
主要操作是watcher.run()
run才是真正的更新方法
src\core\observer\scheduler.js
主要操作是watcher.run()
run才是真正的更新方法
src\core\observer\scheduler.js
微任务队列: [flushCallbacks]
callbacks:[flushSchedulerQueue]
flushSchedulerQueue:
刷新watchers队列
flushCallbacks:
刷新callbacks数组中的回调
callbacks:[flushCallbacks]
callbacks:[flushSchedulerQueue]
flushSchedulerQueue:
刷新watchers队列
flushCallbacks:
刷新callbacks数组中的回调
callbacks:[flushCallbacks]
Vue异步更新流程图
0 条评论
下一页
