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

2023年1月30日 202次阅读 来源: yjy5264

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞