初始化流程
入口文件<br> platforms/web/entry-runtime-with-compiler.js<br>
运行时<br>platforms/web/runtime/index.js<br>
安装平台特有的补丁函数 用来做初始化和更新<br>Vue.prototype.__patch__ = inBrowser ? patch : noop<br>
实现$mount
初始化全局api<br>core/index.js<br>
全局api实现<br>src\core\global-api\index.js<br>
Vue的构造函数<br>src\core\instance\index.js<br>
实现_init<br>src\core\instance\init.js<br>
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<br>src\core\instance\lifecycle.js<br>
数据响应式
observe返回一个ob实例<br>core/observer/index.js<br>
Observer对象根据数据类型执行对应的响应化操作<br>判断value类型,创建ob小秘书<br>core/observer/index.js<br>
observeArray()
defineReactive定义对象属性的getter/setter<br>core/observer/index.js<br>
Dep负责管理一组Watcher，包括watcher实例的增删及通知更新<br>src\core\observer\dep.js<br>
两种dep的作用
Watcher解析一个表达式并收集依赖，当数值变化时触发回调函数<br>src\core\observer\dep.js<br>
dep和watcher的映射规则<br>
数组响应式
覆盖数组原型<br>src\core\observer\array.js<br>
数组响应式的特殊处理<br>src\core\observer\array.js<br>
依赖收集时特殊处理<br>src\core\observer\array.js<br>
数组打补丁<br>src\core\observer\array.js<br>
虚拟Dom
渲染、更新组件<br><br>mountComponent() core/instance/lifecycle.js<br>
生成虚拟dom<br>_render core/instance/render.js<br>
update负责更新dom，转换vnode为dom<br>_update core\instance\lifecycle.js<br>
__patch__是在平台特有代码中指定的<br><br>__patch__() platforms/web/runtime/index.js<br>
子主题
子主题
Vue异步更新
对修改数据触发observe的defineReactive中的set执行<br>例如 this.foo = xxx<br>src\core\observer\index.js<br>
set对应的小管家Dep通知更新notify<br>执行对应的watcher小秘书的update方法<br>src\core\observer\dep.js<br>
update执行时把对应的watcher放入queueWatcher队列中<br>src\core\observer\watcher.js<br>
去重,保证只有一个watcher,<br> 调用nextTick<br>异步的执行flushSchedulerQueue<br>src\core\observer\scheduler.js<br>
getter就是updateComponet方法，组件更新正式执行了<br>updateComponent()方法主要是做了以下几点<br>1. 先render()=>vnode(虚拟DOM)<br>2. vnode=>update()=> vnode=>node<br>
run方法() <br>// 如果是组件级的watcher, 只执行get<br> const value = this.get()<br>get()执行了两件事:<br>1.pushTarget() 将watcher赋值给Dep.target<br>2.执行了this.getter方法
将回调函数存放callbacks数组,执行异步任务<br><br>src\core\util\next-tick.js<br>
timerFunc() <br>存放flushCallbacks到微任务队列,并执行微任务 flushCallbacks方法<br>这个flushCallbacks就是$nextTick中传入的flushSchedulerQueue<br><br>src\core\util\next-tick.js<br>
flushSchedulerQueue()<br>主要操作是watcher.run() <br>run才是真正的更新方法<br>src\core\observer\scheduler.js<br>
微任务队列: [flushCallbacks]<br>callbacks:[flushSchedulerQueue]<br><br>flushSchedulerQueue:<br>刷新watchers队列<br><br>flushCallbacks:<br>刷新callbacks数组中的回调<br>callbacks:[flushCallbacks]<br>
Vue异步更新流程图
