Vue & React

渲染机制

Vue 响应式系统

1. 响应式变量，基于 Proxy 做的响应式代理，代理了get和set的操作。
2. 依赖追踪，Vue的每个响应式对象都有对应的Dep对象，记录了依赖该响应式对象的Effect副作用，当该响应式对象变化时，将遍历触发所有Effect。
3. 计算属性等。

React Hooks 和 re-render

1. useState
2. useEffect
3. 状态变量改变将遍历去re-render函数式组件以及其子组件

状态更新的异步与同步

异步的好处：批量更新，统一管理，优化性能 同步的好处：运行机制更符合预期，第一时间操作新值

1. vue的状态变量的变化是同步操作，可以立刻访问到新值。但dom的更新是异步。这是一个比较完美的实现逻辑，同步操作数据，异步操作dom。这主要依赖于vue的依赖追踪机制，对数据更新和dom更新做了区分，dom更新会存入微任务队列里做异步处理。

2. React的状态变量变化和dom更新都是异步操作，需要在下一周期访问新值。这样的设计受限于React的渲染机制，并没有特别区分数据更新和视图更新的Effect，而是根据状态变量变化re-render函数式组件以及子组件，所以只能统一做异步处理。