v-if 和v-show 虚拟dom，diff算法

v-if:根据条件动态的添加或删除元素，v-if是惰性的，如果初始值就是false，它就会什么也不会做，如果是true它才会去进行渲染。当值由true改为false，它是真实的去节点去删除dom这个节点，此外它只有对数据再次进行渲染，v-if才会去重新判断，所以v-if适合一次性渲染，不太适合频繁判断的操作。

特点：1，真实删除dom节点，而不是对display进行隐藏     2，因为涉及dom操作，切换耗费性能比v-show大，不适合频繁切换，由于这个原由同样还最好不要同v-for同用       3，是惰性的，只有当判断值为true才会去进行操作  

v-show：同样也是根据条件动态的添加和删除元素。v-show每次都会先进行判断，然后去操作，只不过当值为false的时候对css样式进行隐藏，并不是真实去节点删除dom元素

特点：1，初始化耗费性能较大，但是切换由于进行css操作所以耗费性能低适合需要频繁切换的操作       2，切换进行css样式操作，不是真实进行dom删除添加操作

虚拟dom：vue中的虚拟dom并不是浏览器真实的dom树，而是利用js的算力虚拟出的dom树，是一个轻量级虚拟的dom树，相当于在js和浏览器中加了一个缓存，并不会真正展示在浏览器上的。

优点：虚拟dom利用diff算法，可以复用相同的dom，用diff算法比较出不同点加以改变，做到最小变动，也不会频繁的在浏览器上排版重绘，避免了没有必要的操作，只需要比对完最后提交一次性修改，极大的提高了性能。      

缺点：首次渲染的时候多了一层虚拟dom计算，相较之下会比直接innerHTML插入慢

diff算法：                                                                                                                                        1，当发生数据变化的时候，vue会生成一个新的虚拟dom树newVMNode。这个时候vue会调用patch函数，收到两个参数旧oldVMNode和新newVMNode，两者开始进行diff算法对比。              2，首先diff算法会对它们两个根节点进行对比，如果根节点不同直接调用replaceNode函数用新节点进行整个更替。如果两个根节点相同再进行下一步子节点的对比。                                          3，patch函数会对两个虚拟dom树子节点进行遍历分类，根据key进行分类，（如果没有通过key找到匹配的节点则需要深入的调动双端算法去匹配节点）如果新旧节点相同（指key和tag完全相同），则调用patchVnode进行递归比较更新                                                                                 4，当最后旧虚拟dom中还存在未处理的节点，那么这个节点就是需要删除的节点。如果新虚拟dom中没有找到匹配的节点，则这个节点就是需要增加的节点，最后根据这些差异去更新真实的dom。