「这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战」
虚拟dom
react和vue中都用到了虚拟dom，所谓虚拟dom，是一个用于表示真实 DOM 结构和属性的 JavaScript 对象，这个对象用于对比虚拟 DOM 和当前真实 DOM 的差异化，然后进行局部渲染从而实现性能上的优化。
虚拟dom优点:
1.减少操作真实dom。任何页面的变化，都只使用 VNode 进行操作对比，只需要在最后一步挂载更新dom，不需要频繁操作dom，从而提高页面性能
2.兼容性强，不受执行环境的影响。VNode 因为是 JS 对象，不管 Node 还是 浏览器，都可以统一操作， 从而获得了服务端渲染、原生渲染、手写渲染函数等能力
区别:
react:
recat会重新渲染整个组件树，自顶向下全diff，在react中，当状态发生改变时，组件树就会自顶向下的全diff, 重新render页面， 重新生成新的虚拟dom tree， 新旧dom tree进行比较， 进行patch打补丁方式，局部更新dom。
所以react为了避免父组件跟新而引起不必要的子组件更新，可以在shouldComponentUpdate做逻辑判断，减少没必要的render， 以及重新生成虚拟dom，做差量对比过程
vue：
vue会跟踪每一个组件的依赖关系，局部渲染组件树而不需要重新渲染整个组件树。
通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化
补充:
使用虚拟dom的性能会好于真实dom，因为真实dom在渲染过程中会造成dom的重排和重绘，虚拟dom只会渲染局部，有更好的性能体验，这也是为什么react和vue使用虚拟dom的原因
