vue2源码
2021-09-26 23:05:19 9 举报AI智能生成
vue2源码，vue2源码结构图，vue2源码思维导图，vue2源码学习
作者其他创作
大纲/内容
初始化流程
entry-runtime-with-compiler.js
runtime/index.js
core/index.js
initGlobalAPI
vue构造函数core\instance\index.js
initMixin
选项合并
initLifecycle
initEvents
initRender
callHook(vm, 'beforeCreate')
initInjections(vm)
initState(vm)
initProps
initMethods
initData
observe
new Observer(value)
arrayMethods（数组原型函数重写）
observeArray（数组响应式）
walk（对象响应式）
defineReactive
get
当前属性的依赖收集dep.depend()
子对象的依赖收集childOb.dep.depend()
set
新增值的响应式observe(newVal)
变更通知dep.notify()
initComputed
defineComputed
initWatch
createWatcher
initProvide(vm)
callHook(vm, 'created')
stateMixin
eventsMixin
lifecycleMixin
renderMixin
挂载$mount
mountComponent
callHook(vm, 'beforeMount')
new Watcher(vm, updateComponent,...)
this.get()
updateComponent
_update()
patch
新vnode不存在-删除
老vnode不存在-新增
patchVnode
1.元素属性更新
2.新老vnode都存在子节点
updateChildren
1.四种猜想：首首 尾尾 首尾 尾首（比较）
2.循环查找新节点在老节点的位置
不存在创建createElm
存在
相同节点patchVnode & insertBefore移位
key相同节点标签不同创建 createElm
3.扫尾：老数组有剩下的批量删除removeVnodes
3.扫尾：新数组有剩下的批量新增addVnodes
3.老节点undef & 新节点def
addVnodes创建元素
4.老节点def & 新文本undef
removeVnodes移除元素
5.老节点文本 & 新节点无文本
setTextContent文本置空
6.新老节点都是文本
setTextContent文本更新
初始化
createElm
移除模板的宿主元素removeVnodes
异步更新
dep.notify()
遍历执行Watcher.update()
queueWatcher()
nextTick
timerFunc
flushCallbacks
flushSchedulerQueue
callHook(vm, 'beforeUpdate')
watcher.run()
callHook(vm, 'updated')
0 条评论
下一页
