虚拟Dom

一、理解虚拟dom

虚拟Dom的本质就是一个js对象，用来描述真实的Dom

虚拟Dom就是一个js对象.png

真实dom携带了太多的属性和方法，操作起来性能太慢了，并且会有重绘跟回流的问题，所以vue就搞了一个虚拟dom，虚拟dom是一个普通的js对象，操作起来很快

页面初始化的时候，根据代码会先生成一个虚拟dom树，然后再根据虚拟dom树渲染一棵真实的dom树

然后当数据更新的时候，又根据代码生成一棵新的虚拟dom树，直到数据不在变得时候，就开始对新旧得树进行对比，找不同，只更新真实dom不同地方，没有变则不同，所以称为patch打补丁

对比算法.png

1、节点（标签、组件）名如果变了，它所有得children就不看了，直接这块全是新的，这一大块全部更新

-h1->p

2、节点没有变，只有属性变了，就不动了，认为节点还是之前那个，这个称为就地复用，改属性就行了

--h1#abc->h1#bcd

虚拟dom.png

v-for循环的时候，采用就地更新的原则，同级之间进行比较，在顺序上位置是同一个索引就会被认为是同一个元素，正常情况下运行效率非常高，但是当你破坏顺序时（比如sort、unshift）等操作，就会出现不必要的顺序也会被重新更新，导致运行效率降低，甚至导致原来的dom结构重构

v-for循环的时候，因为有了唯一标识符的存在，哪怕破坏顺序，也不会出现不必要的更新，因为这时vue认为key一样的，就是同一个元素、就不会出现更新不必要的元素的情况

1、提高vue的运行效率

2、拥有跨平台的功能、根据所需平台的不同，渲染出该平台适用的代码