虚拟dom&diff算法

虚拟dom

1. 虚拟DOM简介： 虚拟DOM，就是用一个JS对象来描述一个DOM节点(我们把可以描述一个dom节点的js对象称之为虚拟的dom节点)。

2. 虚拟dom的必要性： 直接操作dom非常消耗性能，但可以用JS的计算性能来换取操作DOM所消耗的性能。

3. 原理总纲： 我们可以用JS模拟出一个DOM节点，称之为虚拟DOM节点。当数据发生变化时，我们对比变化前后的虚拟DOM节点，通过DOM-Diff算法计算出需要更新的节点，然后去更新需要更新的视图。

4. vue虚拟dom： vue每个虚拟dom都是通过vnode类实例创建出来（每个虚拟dom都是vnode），通过数据变化前后两次vnode进行对比，通过diff算法找出差异的DOM节点，最后更新有差异的视图，减少直接操作dom，节省性能。

diff算法

1. 简介： diff算法是对比新旧两份VNode并找出差异的算法，DOM-Diff算法是整个虚拟DOM的核心所在。

2. patch(补丁)： 在Vue中，把 DOM-Diff过程叫做patch过程。以新的VNode为基准，改造旧的oldVNode使之成为跟新的VNode一样，这就是patch过程要干的事。（主要为：1.创建节点；2.删除节点；3.更新节点）

3. patch过程(节点操作)：

4. 创建节点：只有三种节点可以创建，元素节点、文本节点、注释节点。 *节点类型判定：元素节点(vnode.tag)，注释节点(vnode.isComment)

5. 删除节点：删除方式为在删除节点的父元素上调用removeChild方法即可。

6. 更新节点： *静态节点：只包含纯文字，没有任何的变量。 更新节点流程：

更新子节点

1. 拥有子节点的情况：当新的VNode与旧的oldVNode都是元素节点并且都包含子节点时，那么这两个节点的VNode实例上的children属性就是所包含的子节点数组。

2. 子节点更新种类：

3. 创建子节点：子节点添加的位置是所有未处理节点之前，而并非所有已处理节点之后(当创建的子节点有多个时)。

4. 删除子节点

5. 更新子节点

6. 移动子节点：子节点移动的位置是所有未处理节点之前就是我们要移动的目的位置。

7. 优化更新子节点：

8. 简介： Vue为了避免双重循环数据量大时间复杂度升高带来的性能问题，而选择了从子节点数组中的4个特殊位置互相比对，分别是：新前与旧前，新后与旧后，新后与旧前，新前与旧后。

9. 简称&逻辑图： newChildren数组里的所有未处理子节点的第一个子节点称为：新前； newChildren数组里的所有未处理子节点的最后一个子节点称为：新后； oldChildren数组里的所有未处理子节点的第一个子节点称为：旧前； oldChildren数组里的所有未处理子节点的最后一个子节点称为：旧后；

10. 两边向中间循环： 在新旧vnode未处理节点对比中，节点有可能是从前面对比，也有可能是从后面对比，对比成功就会进行更新处理，也就是说我们有可能处理第一个，也有可能处理最后一个，那么我们在循环的时候就不能简单从前往后或从后往前循环，而是要从两边向中间循环。