对Angular中单向数据流的深入理解
变更检测
Angular 中，数据是由顶部根节点流向最后的叶子节点，整个数据流是单向，构成一颗单向树。
Angular 认为所有的异步操作都有可能会引起模型的变化，引起数据模型发生变化的事件源有：
- Events：click, mouseover, keyup ...
- Timers：setInterval、setTimeout
- XHRs：Ajax(GET、POST ...)
Angular 封装 Zone来拦截跟踪异步，一旦发现异步行为，Angular 就会进行变更检测。
因为数据流是单向的，组件的数据来源只能由父组件进行传入，所以 Angular 会从上到下，广度遍历检测组件，只要父组件检测完毕就能继续检测子组件。而相比 angularjs，双向、混乱的数据流方向，会导致重复变更检测重复多次，直到数据稳定，可能会导致性能问题，或者出现数据和视图处于不一致的状态，即渲染过程完成后的视图不能反映数据的实际状态。
渲染输出
当检测到数据模型变化时，组件需要重新渲染，Angular将运行它的 DOM 生成函数，该函数会生成一个新的 DOM数据结构，该结构对应于组件 View 的新版本。
Angular 在渲染过程中，评估模板表达式并在整个组件树中调用生命周期钩子。
注意：绿色标志会多次调用
从生命调用周期来看（绿色有向线），ngAfterViewChecked 标示该组件及子组件视图输出完成。看以下一例子：
import {Component, AfterViewChecked} from '@angular/core';
import {Course} from "./course";
@Component({
selector: 'app-root',
template: `
<div class="course">
<span class="description">{{course.description}}</span>
</div>
`})
export class AppComponent implements AfterViewChecked {
course: Course = {
id: 1,
description: "Angular For Beginners"
};
ngAfterViewChecked() {
this.course.description += Math.random();
}
}
上述代码会在Angular变更检测周期发生错误。组件已经完成 DOM 数据结构输出，我们还在该组件 ngAfterViewChecked() 方法中修改了数据状态。这样导致了视图渲染后，数据跟视图状态不一致。
数据从组件类流向表示它们的DOM数据结构，生成这些DOM数据结构的行为本身就不会导致数据的进一步修改。但我们在 ngAfterView 生命周期发生修改数据行为，Angular 的“单向数据流”规则禁止在一个视图已经被组合好之后再更新视图。
这意味着数据模型到视图过程是单向，不可在视图后发生数据流发生改变。
总结
从变更检测过程以及渲染输出过程中，可以总结出：
单向数据流指的是从组件树的顶部到底部渲染扫描过程中应用程序数据流转到由渲染过程生成的输出DOM数据结构的流程。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
AngularJS框架的ng-app指令与自动加载实现方法分析
这篇文章主要介绍了AngularJS框架的ng-app指令与自动加载实现方法,结合实例形式分析了ng-app指令的功能及自动加载机制的实现技巧,需要的朋友可以参考下2017-01-01
这篇文章的主要内容是使用angularjs实现一个计算器，是一个仿iOS8风格的计算器，功能基本和iOS自带的计算器是一致的。有需要的朋友们可以参考借鉴。2016-09-09
详解为Angular.js内置$http服务添加拦截器的方法
所谓拦截器就是在目标达到目的地之前对其进行处理以便处理结果更加符合我们的预期。Angular的$http拦截器是通过$httpProvider.interceptors数组定义的一组拦截器，每个拦截器都是实现了某些特定方法的Factory。本文就介绍了为Angular.js内置$http服务添加拦截器的方法。2016-12-12
Directive是一个非常棒的功能。可以实现我们自义的的功能方法。下面通过实例代码给大家介绍Angularjs自定义指令Directive相关知识，感兴趣的朋友一起学习吧2017-05-05
在Angular中,NgZone是一个服务,用于管理异步任务的执行,并提供一种在Angular区域内或外部显式运行代码的方式,NgZone.run方法是一种显式在Angular区域内运行函数的方式,本文介绍Angular中的NgZone.run()有什么用,感兴趣的朋友一起看看吧2024-01-01
本篇文章主要介绍了AngularJS的ng-click传参的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了详解Angular Karma测试的持续集成实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
本篇文章主要介绍了详解Angular5 服务端渲染实战，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了AngularJS使用ng-options指令实现下拉框效果，ng-option指令使用也很简单，下文具体给大家说明，对angularjs 下拉框知识感兴趣的朋友一起看下吧2016-08-08
这篇文章主要介绍了AngularJS API之copy深拷贝详解及实例的相关资料,需要的朋友可以参考下2016-09-09
最新评论