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

sixgo 发布于2019-08-22 18:50 / 2095人阅读

摘要：最先说的原因是因为它与其他两个框架不同，用的是脏检查机制实现双向数据绑定在中有一个负责监听需要视图变化的事件触发每一个组件都都它自己的检测器，用于负责检查其自身模板上绑定的变量。

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

在Angular中有一个Zone.js负责监听需要视图变化的事件触发

每一个组件都都它自己的检测器(detector)，用于负责检查其自身模板上绑定的变量。

将旧值跟新值进行比较，不相等就说明检测到变化，更新对应视图

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

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

tree diff 只对同一层级节点比较

component diff 比较组件类型

element diff 同一层级子节点通过id区分

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

Vue

Vue会遍历data对象的所有属性，并使用Object.defineProperty把这些属性全部转为getter/setter

每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖

当依赖项的setter被调用时，会通知watcher重新计算，从而致使它关联的组件得以更新

React

当使用setState/forceUpdate，会调用render方法更新视图

父组件更新视图时，会re-render子组件，所以看起来改变子组件的props也会更新视图

更多文章 yjy5264.github.io

GPU云服务器云服务器大数据三大框架学习三大云存储服务对比 java三大框架 javaweb 三大框架

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96259.html

珠峰前端架构师培养计划

摘要：公司的招聘要求都提到了至少熟悉其中一种前端框架，有前端工程化与模块化开发实践经验相关字眼。我们主要从端公众号移动端小程序三大平台进行前端的技术选型，并来说说选其技术的几大优势。技术的优势互联网前端大潮后，前端出现了大框架，分别是与。 1、技术选型的背景前端技术发展日新月异，互联网上出现的新型框架也比较多，如何让新招聘的人员...

ccj659 2021-11-22 15:24 评论0 收藏0
前端三大框架对比

摘要：与相同点使用，有较高的运行速度提供组件化功能可使用与进行状态管理，响应式依赖追踪子组件重复渲染问题需要手动优化可以使用进行状态管理，函数式不可变模式化，时间旅行可使用，完全的能力更繁荣的社区生态可使用，但推荐使用模版语言而不是学习曲线平缓特 React与Vue 相同点使用 Virtual DOM，有较高的运行速度提供组件化功能可使用mobx与vuex进行状态管理，响应式、依赖追...

jubincn 2019-08-22 15:35 评论0 收藏0
2019年前端趋势分析

摘要：据状态调查显示，只有的前端开发人员使用过，但是有惊人的的开发人员已经听说过它并希望使用它。事实上，在调查中，的评分高于本身，为，而最受喜爱的语言为。在年，的下载数量大幅增长，而保持不变。 2018年TypeScript 全面开花，GraphQL 蠢蠢欲动，WebAssembly 更是打开了浏览器上多语言的大门。所有这一切跟现在的前端有哪些关系呢？下面小编来分享一下 1.三大框架标准化 ...

Anonymous1 2019-08-02 16:13 评论0 收藏0
2019年前端趋势分析

摘要：据状态调查显示，只有的前端开发人员使用过，但是有惊人的的开发人员已经听说过它并希望使用它。事实上，在调查中，的评分高于本身，为，而最受喜爱的语言为。在年，的下载数量大幅增长，而保持不变。 2018年TypeScript 全面开花，GraphQL 蠢蠢欲动，WebAssembly 更是打开了浏览器上多语言的大门。所有这一切跟现在的前端有哪些关系呢？下面小编来分享一下 1.三大框架标准化 ...

elarity 2019-08-23 17:00 评论0 收藏0