angular2+监测属性的变化

angular项目中通过@Input来实现从父component到子component属性的传值。angular框架本身提供了一系列的钩子函数, 其中ngOnchange是对传入值进行监测,只要传入值有所变化,就会进入ngOnchange钩子函数。

曾经一度也是认为,属性的监测理所当然应该是在ngChange里操作。但自从远方的朋友给了这样一个comments:

angular2+监测属性的变化_第1张图片

查阅了相关资料,setter相较于ngOnchange的好处,大致可以理解为,ngOnChange执行的时候,会监测所有@Input属性的变化,但有的时候我们往往只需要对某一个属性进行监测,所以用setter更简洁方便, 详情:https://ngdev.space/angular-2-input-property-changes-detection-3ccbf7e366d2

但令我好奇的是,angular关于@Input的实现原理到底是什么,为什么只要输入参数有所变化就会,进入setter这个钩子函数呢?

查阅了angular关于@Input的源码库,其实现逻辑为:

angular2+监测属性的变化_第2张图片

@Input 传入即是从父组件的dom元素取值赋值给子组件变量的一个过程。即是赋值操作,自然会进入setter函数,也就是说只要父组件dom元素的值发生变化,即会发生一次赋值操作进入setter钩子函数。

问题又来了, 父组件是怎么监测到dom元素值发生变化的呢?

这就涉及到一个永恒的话题,变化监测,Angular的变化检测可以分组件进行,每个组件都有对应的变化检测器ChangeDetector。这里先不深入探究。关于angular变化监测这个深坑,一定要细细品味,深入骨髓。。。

https://zhuanlan.zhihu.com/p/27901766 (先贴一个链接,回头慢慢看)

https://blog.thoughtram.io/angular/2016/02/22/angular-2-change-detection-explained.html

你可能感兴趣的:(angular2+监测属性的变化)