前端三大框架对比(二)——数据更新

Angular

最先说Angular的原因是因为它与其他两个框架不同,用的是脏检查机制(Dirty Checking)实现双向数据绑定

  1. 在Angular中有一个Zone.js负责监听需要视图变化的事件触发
  2. 每一个组件都都它自己的检测器(detector),用于负责检查其自身模板上绑定的变量。
  3. 将旧值跟新值进行比较,不相等就说明检测到变化,更新对应视图

Vue & React 都是采用虚拟DOM来实现视图更新

虚拟DOM

vue和react的虚拟DOM的Diff算法大致相同:

  1. tree diff 只对同一层级节点比较
  2. component diff 比较组件类型
  3. element diff 同一层级子节点通过id区分

基于以上这三个约束,使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)。

Vue

  1. Vue会遍历data对象的所有属性,并使用Object.defineProperty把这些属性全部转为getter/setter
  2. 每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖
  3. 当依赖项的setter被调用时,会通知watcher重新计算,从而致使它关联的组件得以更新

React

  1. 当使用setState/forceUpdate,会调用render方法更新视图
  2. 父组件更新视图时,会re-render子组件,所以看起来改变子组件的props也会更新视图

更多文章 yjy5264.github.io

    原文作者:yjy5264
    原文地址: https://segmentfault.com/a/1190000015685706
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞