angular2+监测属性的变化

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

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

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

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

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

@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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 组件基础 组件用来包装特定的功能,应用程序的有序运行依赖于组件之间的协同工作。组件是angular应用的最小逻辑单...
    oWSQo阅读 1,397评论 0 0
  • angular提供了数据绑定的功能。所谓数据绑定就是将组件类的数据和页面的DOM元素关联起来。当数据发生变化时,a...
    oWSQo阅读 1,437评论 0 1
  • 文章翻译已征得原作者同意,原文链接:link 正文 最近在stackoverflow上总看有人问到使用Angula...
    shh苏哈哈阅读 2,197评论 0 2
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • 亲爱的大树, 生日快乐!今天是你的生日,我看到了姐姐发过来的照片,照片上的你看起来精神极了。照片上的蛋糕也好诱人啊...
    间晓阅读 673评论 0 0