异步更新:批量异步执行组件更新
用户触发set时候 dep.notify()->通知watcher.update()->watcher入队列(queueWatcher)因为用户可能触发多个属性更新,所以queueWatcher会调用多次,里面有个去重方法,只会让watcher入队一次,这就是批量操作
异步性体验于nextTick()传入刷新函数,异步启动timeFunc(),选择异步策略,先选微任务,后选宏任务,最后watcher.run
虚拟dom:
是什么:
是描述真实dom的js对象,有树形结构,层级关系,能描述真正dom的关系。
为什么需要:
vue2.0 一个组件对应一个watcher,watcher粒度的改变,多个属性更新的时候,是不知道哪个属性更新的,所以需要一个载体去保存新旧的状态
优点:
跨平台,轻量,快速,高效,兼容性
怎么用:
当执行更新的时候,执行的是watcher.run()
调用的是updateComponent()里面计算出虚拟dom:_render(),转化真实dom:_update(),里面执行vm.patch(),
属性更新:
内部是createPatchFunction函数,指定cbs对象,把钩子函数作为cbs的key,赋值为空数组,cbs.create = [fn1,fn2],里面放属性创建执行的函数。
pacthVNode里面的属性更新,把新老节点传入,把cbs数组上的所有函数执行一遍。
patch打补丁函数,传入新老虚拟dom,判断新节点存在(增),新节点不存在(删),剩下的情况分为:首次创建和比较孩子节点。
首次创建:把转化为虚拟dom转化为真实dom拼接在旧节点后面,再把旧节点删掉。
比较孩子节点updateChildren():
四个游标分别指向老节点的开始和结束节点,新节点的开始和结束节点
假设老开始节点和新开始节点是同一个节点
执行pacthVNode方法再比较他们的子节点,递归比对完,游标向后移动,指向下一个节点
网友评论