什么是虚拟 dom 为什么要有虚拟 dom
- 什么是虚拟 dom 虚拟 dom 是对真实的 dom 的映射，它就是一个普通的 js 对象 比如
<h1 id="abc">hello</h1>{tagName:'h1',attrs:{id:'abc'},children:['hello']} - 为什么要有虚拟 dom 真实的 DOM 对象身上有一堆的属性和方法，操作起来性能慢 而且直接操作真实的 DOM 每操作一次就会导致一次重绘和回流 所以不太好 频繁操作虚拟 dom 不存在性能问题 等数据全部更新完之后，只会更新真实 DOM 树需要改变的地方，而且渲染新的真实的 dom,只会有一次重绘和回流
- 组件初始化的时候会在 的时候创建一个虚拟 dom 树，当数据有更新的时候，会生成一棵新的虚拟 dom 树，接下来会对新旧 dom 树按照是广度优先、同层进行比较（时间复杂度是 O(n) 线性复杂）
- diff 算法
- 第一种情况：元素（标签）变了，直接这块销毁重建
- 第二种情况：元素没有变，属性或内容变了，修改属性或内容
- 第三种情况：当使用v-for遍历的时候，存在二种情况
- 没有key的时候或者key是索引index的时候，它会采用就地复用（就地更新）原则，在顺序上位置是同一个索引就会被认为是同一个元素，正常情况下效率确实会很高，但是当你采用unshift,sort,reverse这些破坏顺序的时候，就会出现不必要的元素也要去更新内容或属性
- 有key的时候，key就是一个唯一的标识，就像人的身份证号一样的，有了这个之后，哪怕是顺序被打乱了，但是vue知道只要key一样就是同一个元素，就不会出现去更新旧的元素的情况
- 虚拟dom作用除了可以实现高效更新（数据变了的时候视图更新效率更高），还可以实现跨平台
- 一套代码，可以生成不同的平台的最终代码
手里面只有一个车的图纸设计稿（对这个东西长什么样子描述） 如果大人来了 造一个真的车 小孩来 搞一个模型
虚拟dom本质就是一个普通的js对象，用来描述这块长什么样子 跨平台
- 如果是html浏览器 渲染成真实的DOM
- 如果是android,渲染成android对应的UI代码
- 如果是ios，渲染成对应IOS代码
