angular---生命周期

Question

//template:
<input [(ngModel)]='value'/>

//ts:
value:string
//当用户输入时
ngOnChanges(){console.log(this.value)}//不会调用
ngDoCheck(){console.log(this.value)}//调用
ngAfterContentChecked(){console.log(this.value)}//调用
ngAfterViewChecked(){console.log(this.value)}//调用

问题

1.为什么OnChanges不调用?难道value不是输入属性？

2.能够监控value的三个钩子函数，用哪个好？或是有其他更好的方法？

Answer 1

OnChanges是在本组件的输入属性变化之后才调用，输入属性是你在ts文件中使用@Input注解的属性，value不是输入属性，因为你没有这样写

@Input("value")
value:string;

ngDoCheck在每次界面事件以及ajax事件都会调用，如果写的效率不高会严重影响性能，如果你要用这个钩子，必须要完美优化钩子里的代码，使其以最快速度执行。

ngAfterContentChecked、ngAfterViewChecked应该比ngDoCheck调用少一些，性能更高。