虚拟Dom和diff算法

在数据更改后，会触发getter，然后通过dep.notify()来通知watcher触发update进而更新视图，最终是通过Diff算法来对比新老Vnode的差异，并把差异更新到Dom视图上

相关知识点：

• 真实DOM是怎么转换为虚拟DOM的 ？通过模板编译函数生成的，也就是正则匹配
• h函数是干什么的？h函数用来产生虚拟节点vnode的
• patch函数作用？是diff算法的核心函数，主要用来对比新旧dom

虚拟DOM是一颗树，而diff算法主要把两颗树进行对比，找出之间的差异，来渲染页面

diff 算法是通过同层的树节点进行比较而非对树进行逐层搜索遍历的方式，所以时间复杂度只有 O(n)，是一种相当的算法
1.调用patch函数比较Vnode和OldVnode,如果不一样直接return Vnode即将Vnode真实化后替换掉DOM中的节点（这里是比较他们的key和标签名是否相同，也就是是否是同一层的同一个节点）

2.如果OldVnode和Vnode值得进一步比较则调用patchVnode方法进行进一步比较，分为以下几种情况：

Vnode有子节点，但是OldVnode没有，则将Vnode的子节点真实化后添加到真实DOM上

Vnode没有子节点，但是OldVnode上有，则将真实DOM上相应位置的节点删除掉

Vnode和OldVnode都有文本节点但是内容不一样，则将真实DOM上的文本节点替换为Vnode上的文本节点

Vnode和OldVnode上都有子节点，需要调用updateChildren函数进一步比较

updateChildren比较规则
diff算法中updateChildren的四种命中查找（按顺序比较）：

• 新前与旧前(指针移动)

• 新后与旧后(指针移动)

• 新后与旧前(此种命中，涉及移动节点，首先将旧前指向的节点设为undefined，然后将旧前指向的节点，移动到旧后之后，也就是真实dom中的第一个节点会移到最后)

• 新前与旧后(此种命中，涉及移动节点，首先将旧后指向的节点设为undefined，然后将旧后指向的节点，移动到旧前之前，也就是真实dom中的最后一个节点会移到最前，匹配上的两个指针向中间移动)

  命中一种就不再进行命中判断了。如果都没命中，则需要用循环来寻找（用循环找到了会给在旧节点中找到的节点加上undefined标记，其中undefined在虚拟节点中已经不存在，而在真实DOM中已经插入进去了）
  以下解释说明循环操作的流程
  如果都没有，在没有key的情况下直接在DOM的位置的前面添加新前，同时新前+1。在有key的情况下会将新前和所有旧节点对比，如果有相同的则移动DOM并且将旧节点中这个位置置为null且新前+1。如果还没有则直接在DOM的旧前位置的前面添加新前且新前+1. 直到出现任意一方的start>end，则有一方遍历结束，整个比较也结束.

下为patch函数的简单while循环讲解：
设计四个指针，分别为旧前、旧后和新前、新后。其中新前、旧前分别指向新节点的第一个节点和旧节点的第一个指针。新后和旧后同理。
while(新前<=新后&&旧前<=旧后){…上述四种命中…}

• 如果是旧节点先循环完毕，则说明新节点中剩下的为要插入的节点
• 如果新节点先循环完毕，旧节点中还有剩余节点，则说明剩下的是要被删除的节点

虚拟DOM

虚拟DOM:用JavaScript对象描述DOM的层次结构。DOM中的一切属性都在虚拟DOM中有对应的属性
如：真实DOM

对应的虚拟DOM

虚拟节点的属性：
children是否有叶子结点
data是属性也就是class:child之类
elm是否上树
sel选择器
text文字内容

diff算法

• 在diff算法中，key很重要，是节点的唯一标识，告诉diff算法，在更改前后它们是同一个DOM节点
• 只有是同一虚拟节点，才会进行精细化比较。其中同一虚拟节点指选择器sel相同且key相同。否则就会暴力重构
• 只会同层比较，不会跨层比较。

让虚拟节点上树的函数patch()

视频链接
附别人详细版笔记：
版本一
版本二