Angular数据更新时组件如何重新渲染？实例疑问解答

1. 构造函数是否会被重复调用？ #

不会。Angular 组件的构造函数仅会在组件实例首次被创建时执行1次，只要组件没有被销毁重建（例如通过*ngIf移除后重新渲染、路由跳转离开后再返回对应路由），构造函数永远不会二次执行。

2. 为什么this.table会同步更新？ #

这是JavaScript的引用类型特性导致的：
数组属于引用类型，你在构造函数中执行this.table = tableService.getData()时，只是将服务中tableData数组的内存引用赋值给了组件的table变量，两者指向的是完全相同的数组对象。
所以当你在服务中调用push方法修改这个数组的内部元素时，组件的table变量因为指向同一个数组，自然能访问到更新后的内容。如果你注释掉构造函数中给this.table赋值的代码，组件的table变量就没有和服务的数据源建立引用关联，自然不会同步更新。

3. Angular 是怎么触发视图重新渲染的？ #

Angular 默认的变更检测机制会自动监听所有内置异步事件的执行完成时机，包括：

• 各类DOM事件（比如你触发submitTask的表单提交、点击事件）
• HTTP请求响应
• 定时器（setTimeout/setInterval）
• Promise回调等
  当submitTask的回调逻辑执行完毕后，Angular会自动触发当前组件树的变更检测，遍历检查所有模板绑定的变量值是否有变化。你模板中绑定了table数组的相关渲染逻辑，即使数组的引用没有变化，变更检测过程中也会检查到数组内部元素的更新，进而更新视图展示最新数据。

可选优化建议 #

如果你后续需要改为不可变数据更新（比如每次修改数组都返回全新的数组对象，避免引用类型的副作用），可以在服务中使用RxJS的BehaviorSubject来封装数据源，组件订阅数据源的变化主动更新本地变量，适配更复杂的跨组件数据同步场景。

内容的提问来源于stack exchange，提问作者calveeen