Vue2---虚拟DOM、diff算法、key值

虚拟DOM  

        虚拟DOM这个概念是在Vue2中提出来的一种特性，在Vue1中是没有这个概念的。

        提出虚拟DOM是为了解决跨平台的问题，就是希望我们写的代码不仅可以在浏览器里面运行，还可以在ios，安卓等手机端去运行。

        设置虚拟DOM之后，渲染的过程可以单独的去设计，比如说只负责数据改了之后虚拟DOM的重新生成，最终虚拟DOM变成什么样子可以由平台方去实现，这个是引入虚拟DOM的一个最大的好处。

        其实虚拟DOM本身很简单，它就是一个对象，对象里面有属性，有键值对。

        但是怎么对象表示的含义变成真正的元素，这个由平台去决定，这个是虚拟DOM的好处。

        

diff算法

        diff算法是和虚拟DOM配套出来的，引入了虚拟DOM，就意味着不会去直接操作DOM，这个时候更改了数据以后，random函数会重新去执行，就会得到一个全新的虚拟DOM。

        这个时候时候要知道视图怎么去更新，就要找到当前的虚拟DOM和上一轮的虚拟DOM之间的差异，diff就是差异的英语缩写（different），意思就是说去找差异、找不同。

        diff算法在Vue代码里主要是通过一个函数，catchVnode，它其实是一个递归调用的过程，在比较整个虚拟DOM树的时候，需要一个节点一个节点的去比较。

        比较第一个节点的时候，它也可能有子元素，所以这个时候需要去递归的去比较，从算法来看是一个深度优先的过程，也就是不断的去找。

        在具体的实现的过程中，如果有两组虚拟DOM，我们精确到某一个节点，假设这个节点是一个数组，里面有三个元素，加一个元素就变成了四个元素。这样的话，老节点有三个元素，新节点有四个元素，就要去按照一定的策略去找不同。首先是头和头之间比较，看是否为一个东西，如果是，就往后挪。第二步，通过头和头之间不一样，立马就进行尾和尾之间的对比，如果是一样的话就继续往前走，如果不一样，就进行交叉对比，新的虚拟DOM的头和老的虚拟DOM的尾进行比较，如果这个时候还不一样，就把新的虚拟DOM的尾和老的虚拟DOM的头进行比较。也就是交叉的去比较。

        在diff算法里有一个很重要的动作，就是要去判断节点与节点之间是否一样。这个要用一个api去判断，内部名字叫 saveVnode，在这里面有一个很重要的条件就是 key 的值。这也就是为什么我们在写一些循环的时候，需要我们把key值加上去。为的就是让diff算法更加方便。

key值的作用

        key的作用就是提升diff算法的效率。

        diff算法需要节点之间进行对比，早期的时候，不设置key值，它就是undefined，现在是会生成一个唯一值。但是不管是undefined还是唯一值，本质和数组的下标是一样的。

        不设置key值的话，在diff算法对比的时候都是一样的。这个时候效率会降低。

        如果设置了key值，key是唯一值，一般我们从后端那里拿到的数据里面有一个id，会设置成id。这个时候的效率就会提升，因为在diff算法对比两个DOM是否一样的时候，就会首先对比节点之间的key值，如果key值不一样，就会跳出当前这个比较，就代表不是一个相同的，就会沿着上面的策略，头和头之间不一样，立马就会进行尾和尾对比。但是key值设置为了下标，头和头比，下标是一样的，这个时候需要进一步的比较子元素，因为是递归的去比较的。这样的比较效率会降低。这个就是key值的作用。