【面试题】每日一道面试题 什么是虚拟 dom 为什么要有虚拟 dom

1. 什么是虚拟 dom 

虚拟DOM是对真实DOM的映射，它本质就是一个普通的js对象

比如`<h1 id="abc">hello word</h1>` `{tagName:'h1',attrs:{id:'abc'},children:['hello']}`

---

2.为什么要有虚拟DOM

操作真实dom

• 真实的dom上有一堆的属性和方法，直接操作DOM的化性能会变得很慢
• 直接操作真的的DOM每操作一次就会导致一次重绘和回流，所以不太好

操作虚拟DOM

• 频繁操作虚拟DOM不存在性能问题，等数据全部更新完之后只会去更新真实dom树需要更新改变的地方
• 页面的更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对象的速度显然要更快，等更新完成后，再将最终的JS对象映射成真实的DOM，交由浏览器去绘制，从而提高性能！

---

3.

• 组件初始化的时候会创建一个虚拟DOM树，当数据更新的时候会生成一颗新的虚拟DOM树
• 2.接下来对新旧虚拟DOM按照广度优先，同层进行比较，一层一层往下查，找到不同的地方进行打补丁，没变就不更新

---

4、diff算法

• 元素（标签）变了，直接销毁这块重建
• 元素没有变，属性或内容变了，修改属性或者内容
• 当使用v-for遍历的时候存在两种情况
  • 没有key的时候或者key是索引index时，他会采用就地服用（就地更新原则），在顺序位置上同一个索引就会被认为是同一个元素，正常情况下效率确实会比较高，但是当采用数组的一些方法比如：unshift,sort,reverse这些会破坏顺序的时候，就会出现索引不一样，不必要的元素也要更新内容和属性
  • 有key的时候：key就是一个唯一的标识，就像人的身份证一样，有了这个唯一标识哪怕顺序被打乱，但是vue也知道只要key一样就是同一个元素，就不会出现去更新旧元素的情况

---

总结

• 虚拟DOM作用除了可以实现高效更新（数据变了的时候视图更新效率更高）
• 还可以实现跨平台，一套代码生成不同的平台的最终代码，等于说比如写一套代码就能打包安卓，ios两个平台