众所周知,Vue通过数据绑定来修改视图,当某个数据被修改的时候,set
方法会让闭包中的Dep
调用notify
通知所有订阅者Watcher
,Watcher
通过get
方法执行vm._update(...)
,进而去更新视图。
在vm._update(...)
中,Vue会调用patch(...)
(vdom/patch.js第659行左右),将新产生的vnode
与数据未变更之前的旧的prevVnode
进行对比。
在patch(...)
方法中,Vue通过sameVnode(...)
(vdom/patch.js第42行左右)对新旧两个Vnode对象进行比较,通过比对它们的标签名(tag
)、键值(key
)、是否都拥有data选项(isDef(data)
)以及是否都为注释节点(isComment
)来确定这两个Vnode映射的真实DOM节点为同一个。只有确定它们是同一个真实DOM节点的不同映射时,才会执行下一步patchVnode(...)
(vdom/patch.js第501行左右)。
在patchVnode(...)
中,Vue会依据新旧两个Vnode对象是否拥有子节点children
执行不同的DOM操作,当两个Vnode对象都有子节点时,会调用updateChildren(...)
(vdom/patc