平武建站

Angular中单向数据流的示例分析

这篇文章主要介绍了Angular中单向数据流的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

为南票等地区用户提供了全套网页设计制作服务，及南票网站建设行业解决方案。主营业务为成都网站建设、网站设计、南票网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

变更检测

Angular 中，数据是由顶部根节点流向最后的叶子节点，整个数据流是单向，构成一颗单向树。

Angular中单向数据流的示例分析

Angular 认为所有的异步操作都有可能会引起模型的变化，引起数据模型发生变化的事件源有：

  • Events：click, mouseover, keyup ...

  • Timers：setInterval、setTimeout

  • XHRs：Ajax(GET、POST ...)

Angular 封装 Zone来拦截跟踪异步，一旦发现异步行为，Angular 就会进行变更检测。

因为数据流是单向的，组件的数据来源只能由父组件进行传入，所以 Angular 会从上到下，广度遍历检测组件，只要父组件检测完毕就能继续检测子组件。而相比 angularjs，双向、混乱的数据流方向，会导致重复变更检测重复多次，直到数据稳定，可能会导致性能问题，或者出现数据和视图处于不一致的状态，即渲染过程完成后的视图不能反映数据的实际状态。

渲染输出

当检测到数据模型变化时，组件需要重新渲染，Angular将运行它的 DOM 生成函数，该函数会生成一个新的 DOM数据结构，该结构对应于组件 View 的新版本。

Angular 在渲染过程中，评估模板表达式并在整个组件树中调用生命周期钩子。

注意：绿色标志会多次调用

Angular中单向数据流的示例分析

从生命调用周期来看（绿色有向线），ngAfterViewChecked 标示该组件及子组件视图输出完成。看以下一例子：

import {Component, AfterViewChecked} from '@angular/core';
import {Course} from "./course";
@Component({
 selector: 'app-root',
 template: `
 
  {{course.description}}
 
`}) 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 的“单向数据流”规则禁止在一个视图已经被组合好之后再更新视图。
这意味着数据模型到视图过程是单向，不可在视图后发生数据流发生改变。

感谢你能够认真阅读完这篇文章，希望小编分享的“Angular中单向数据流的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!


文章标题：Angular中单向数据流的示例分析
文章起源：http://pwwzsj.com/article/jiedsh.html

其他资讯