vue异步更新
2020-12-11 16:35:21 0 举报
AI智能生成
vue异步更新
作者其他创作
大纲/内容
vue异步更新
1coreobserver/index.js
set
2
2observer/dep.js/
dep notify()
执行关联的watchers
3
3observer/watcher.js/Watcher/update
计算属性生成【computed】=》this.lazy
设置选项同步执行才会同步执行=》this.sync
watcher入队
observer/scheduler.js/queueWatcher
queueWatcher(this)
watcher值入队一次
无刷新队列-入队
未处于启动状态-刷新队列【尝试添加一个异步任务】
nextTick(flushSchedulerQueue)
4
function flushSchedulerQueue()
拿出watcher和id
quue存放所有watcher的队列
执行watcher队列
wathcher.run()
5
4 next-tick.js
funcion nextTIck(cb)
传入cb做一次封装解决报错信息
将封装的回调函数放入 callbacks
启动异步任务
timeFunc()
timeFunc是nextick里面一个变量
判断是否是一个promise,获取promise实例
p.then (flushCallbacks)
以微任务的方式。将flushCallbacks放入队列
flushCallbacks
1将存于callbacks的函数存一个副本
2.将副本遍历拿出每一个去执行
3当前callbacks的第一个就是 flushSchedulerQueue
5observer/watcher.js/Watcher/
run(){}
const value =this.get()
get()
pushTarget(this)
this.getter()
Watcher的属性getter =》 就是expOrFn
this.getter=expOrFn
wathcher第一次。在$mount挂载的时候
6虚拟dom
lifecycle.js
lifecycleMixin
Vue.prototype._update
获取上次虚拟dom
首次初始化时,没有prevVnode ,传入真是宿主元素$el
vm.$el=vm_patch_()
web/runtime/patch.js
创建更新函数工厂
nodeOps节点操作 modules属性操作
core/patch.js
createPatchFunction
创建patch工厂函数
属性操作、节点操作
解构出 {modules ,nodeOps}
放入cbs中
return funciton patch
if 判断old节点不是真实dom
else
初始化(isRealElement)
oldVnode= emptyNodeAt(oldVnode)
把传入oldvnode转为vnode
const oldEle = oldVnode.elm
宿主元素 #demo
const parentElm =nodeOps.parentNode(odeElm)
获取宿主元素老爹 body
createElm()
创建元素 :转换vnode=》dom
寻找插入元素的所属元素,也就是=》 body
新创建的在div的后面的 空格位置,获取了一个放置的锚点 ,参考节点 div元素
删除原作为宿主的元素 , 删除原div
patch算法
新节点不存在,老节点存在
删除操作
新节点存在,老节点不存在
批量创建
diff =》 patchVnode
属性更新
文本更新
子节点更新
const oldCh = oldVnode.children
获取比较两个节点的孩子数组
if(isUndefined(vnode.tezt))
新节点没文本,大概率都有孩子
双方都有孩子
updateChildren
比孩子:重排操作
7
新的有孩子,老的没孩子
addVnode
老的有孩子,新的没孩子
批量删除
removeVnode
都有文本
7 function updateChildren()
创建首尾4个有游标以及对应的虚拟节点
循环条件,游标不能相交
前两个条件游标调整
4个假设
首首
更新,游标向后跳一个格
尾尾
更新,游标向前跳一个格
首尾
老开头,新结尾
更新之外,移动, 把首移动尾
尾首
老结尾,新开头
更新之外,移动, 把尾移动首
老老实实查找
从新数组开头节点,到老数组中找
不存在,就创建,
存在【相同节点】则更新并 移动
存在【不同节点】则更新并替换
老数组结束了
新数组有剩下的,则批量创建
老数组有剩下的,则批量删除
0 条评论
回复 删除
下一页