React 与 Vue 更新数据 的区别

本文参考 https://juejin.cn/post/6883032337337516045

一、React 更新流程

React 推崇 Immutable（不可变），通过重新 render 去发现和更新自身；

二、Vue 更新流程

Vue 通过收集数据依赖去发现更新；

Vue 最牛逼的就是响应式更新；Vue 首次渲染操作，触发 data 的 getter ，从而触发依赖收集，为对应的数据创建 watcher；当数据发生更改时，setter 被触发，将会通知各个 watcher， 在下一个 tcik 的时候更新数据。

所以说，如果 Data 中某些数据没有在模版 template 中使用的话，更新这些数据的时候，是不会触发更新的。这样的设计非常好，没有在模版上用到的变量，当它的值发生变化时，不更新视图。

三、React 🆚 Vue 的区别

• 获取数据更新的手段和更新的粒度不一样

Vue 通过依赖收集，当数据更新时， Vue 明确知道是哪些数据更新了，每个组件都有自己的渲染 watcher ，掌管当前组件的视图更新，所以可以精确地更新对应的组件，所以更新的粒度是组件级别的。
React 会递归地把所有的子组件 重新 render 一下，不管是不是更新的数据，此时，都是新的。然后通过 diff 算法 来决定更新哪部分的视图。所以，React 的更新粒度是一个整体。

• 对更新数据是否需要渲染页面的处理不一样

• 只有依赖收集的数据发生更新，Vue 才会去重新渲染页面
• 只要数据有更新（setState，useState 等手段触发更新），都会去重新渲染页面
  （可以使用shouldComponentUpdate/ PureComponent 改善）