Angular：单向数据流

Angular中组件之间关系树结构图：

A组件从接口到拿到新数据，然后把新数据渲染到 view上。这个过A组件的变更检测，同时也会沿着组件树，从上而下触发A组件的所有直系非直系子组件的变更检测。

这个变化检测不仅仅会在 child A component 中执行，它会从 root component 开始沿着 component 关系树结构从上到下执行，直到最后一个 child component 完成变化检测达到稳定状态。也就是说在 GrandChild component 中也会触发执行变化检测，如果 GrandChild component 中还有它自己的 child component，会继续触发它的 child component 的变化检测。在这个从上到下的变化检测流中，一旦 child A component 中的变化检测已经完成了，任何在 GrandChild component 或者更低层级的 component 都不允许去改变 child A component 中的属性。

这个过程就是 Angular 的单向数据流。

单向数据流指的是从组件树的顶部到底部渲染扫描过程中应用程序数据流转到由渲染过程生成的输出DOM数据结构的流程。

在 Angular 整个页面渲染的过程：

更新 child component 的 input bindings，然后会触发 child component 中 OnInit、DoCheck、OnChanges 函数，如果页面有 ng-content，相应也会触发 ngAfterContentInit 和 ngAfterContentChecked。
Angular 会继续渲染当前 component 也就是 parent component 页面。
触发 child component 中的变化检测（change detection）。
触发 child component 中的 AfterViewInit 和 theAfterViewChecked。

Angular：单向数据流相关推荐

vue单向数据流与双向绑定两者区别
1.Vue 在不同组件间强制使用单向数据流,父组件可以向子组件传递数据,但是子组件不能直接修改父组件的状态. 2.数据的双向绑定主要由MVVM框架实现,主要由三部分组成View.ViewModel和 ...
05 state与setState、单向数据流
声明周期与组件卸载 props配置:使用组件时传入数据 state私有数据:组件内部使用的数据 state的使用注意事项必须使用setState方法来更改state 多个setState会合并调用 ...
android数据流分类,【Android工程之类】1 MVVM架构 - MVVM与单向数据流
前言这个系列将讲述使用MVVM架构.LiveData.Room.Kodein.Retrofit.EventBus来建立一个统一的.优雅的.可维护的TODO程序,本系列分为多个章节,从0开始一步一步引 ...
[vue] 说说你对单向数据流和双向数据流的理解
[vue] 说说你对单向数据流和双向数据流的理解单向数据流:所有状态的改变可记录.可跟踪,源头易追溯:所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性: ...
vue.js踩坑之单向数据流
vue.js父子组件之间的数据通信,细节总结隐性规则:单行数据流学前疑问: 1.父组件如何向子组件通信数据? 2.父组件可以直接修改子组件的数据!但是反过来绝对不可以!那怎么解决这个问题呢? 3. ...
Vue 组件/ Prop单向数据流 / $emit自定义方法
组件基础全局注册组件 // 注册组件 Vue.component('cpt-name', {})// 使用 <cpt-name></cpt-name> 局部组件 // 注册局 ...
Vue单向数据流（不要修改props）
在使用Vue组件通信是经常会出现以下此类错误: 在vue中需要遵循单向数据流原则所以什么是单向数据流: 向单项数据流指的是,在父传子的前提下,父组件里面的数据发生改变会带动子组件里的数据进行更新. ...
Vue关于双向绑定和单向数据流的理解
很多接触Vue开发不久的同学会有疑问,vue既然是单向数据流为什么会有双向绑定一说? 关于Vue数据绑定首先引用官网原话: AngularJS 使用双向绑定,Vue 在不同组件间强制使用单向数据流.这 ...
怎么理解vue是单向数据流
在理解vue为什么是单向数据流之前,简单复习下prop, prop也就是父组件传过来的数据,如果我们试图通过子组件的v-model去改变这个prop,也就是试图通过子组件直接去改变父组件的数据,而不是 ...

Angular：单向数据流

Angular：单向数据流相关推荐

最新文章

热门文章