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 条评论
回复 删除
下一页
