vue与react虚拟dom对比

虚拟dom:
同

1. vue和react都采用了虚拟dom算法，以最小化更新真实DOM，从而减小不必要的性能损耗。
2. 按颗粒度分为tree diff, component diff, element diff. tree diff 比较同层级dom节点，进行增、删、移操作。如果遇到component， 就会重新tree diff流程。
   差异

dom的更新策略不同
react 会自顶向下全diff.
vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。
1. 在react中，当状态发生改变时，组件树就会自顶向下的全diff, 重新render页面， 重新生成新的虚拟dom tree, 新旧dom tree进行比较， 进行patch打补丁方式，局部跟新dom. 所以react为了避免父组件跟新而引起不必要的子组件更新， 可以在shouldComponentUpdate做逻辑判断，减少没必要的render， 以及重新生成虚拟dom，做差量对比过程.
2. 在 vue中， 通过Object.defineProperty 把这些 data 属性 全部转为 getter/setter。同时watcher实例对象会在组件渲染时，将属性记录为dep, 当dep 项中的 setter被调用时，通知watch重新计算，使得关联组件更新。

Diff 算法借助元素的 Key 判断元素是新增、删除、修改，从而减少不必要的元素重渲染。

基于Diff的开发建议

1、基于tree diff：

（1）开发组件时，注意保持DOM结构的稳定；即尽可能少地动态操作DOM结构，尤其是移动操作。

（2）当节点数过大或者页面更新次数过多时，页面卡顿的现象会比较明显。这时可以通过 CSS 隐藏或显示节点，而不是真的移除或添加 DOM 节点。

2、基于component diff：

（1）注意使用 shouldComponentUpdate() 来减少组件不必要的更新。

（2）对于类似的结构应该尽量封装成组件，既减少代码量，又能减少component diff的性能消耗。

3、基于element diff：

（1）对于列表结构，尽量减少类似将最后一个节点移动到列表首部的操作，当节点数量过大或更新操作过于频繁时，在一定程度上会影响渲染性能。

（2）循环渲染的必须加上key值，唯一标识节点。