Angular 5可变对象变更检测疑问：push方法为何失效？

嘿，我来帮你捋清楚这个问题～首先得纠正一个小误区：Angular 5+并没有修改默认变更检测的核心逻辑，你遇到的push不生效、重新赋值数组却生效的情况，本质还是和Angular的变更检测机制有关，不管是Angular 2还是5+，这个逻辑是一致的。

核心原理：变更检测的触发条件 #

Angular的默认变更检测策略（ChangeDetectionStrategy.Default）会在每个事件循环周期（比如用户点击、HTTP响应、定时器触发等）自动检查组件绑定的值是否变化。但对于数组和对象这类引用类型，它的检查逻辑有个关键点：

• 如果你只是修改了数组的内容（比如用push、splice），数组的引用地址没有改变，在某些场景下（比如组件意外启用了OnPush策略、代码运行在Angular Zone之外），Angular可能不会检测到内容的变化，导致视图不更新。
• 而this.fruits = [...this.fruits, food]这种方式，是创建了一个新的数组，引用地址发生了变化，Angular的变更检测会立刻捕捉到这个引用变化，从而更新视图。

为什么你觉得Angular 2里push是有效的？ #

大概率是记忆偏差啦～在Angular 2的默认变更检测策略下，正常的同步操作（比如点击事件里调用push）其实是会触发视图更新的。但如果是在异步操作（比如原生setTimeout、第三方库的回调）里调用push，那不管是Angular 2还是5+，都可能出现视图不更新的情况——因为这些操作脱离了Angular的Zone上下文，Angular不知道发生了变化。

解决办法 #

针对你的场景，有几种可行的方案：

• 方案1：保持重新赋值的方式
  你已经在使用的this.fruits = [...this.fruits, food]其实是很优雅的做法，既保证了引用变化，又符合不可变数据的理念，推荐继续使用。
• 方案2：手动触发变更检测
  如果一定要用push，可以注入ChangeDetectorRef来手动通知Angular更新视图：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  addFruit(food) {
    this.fruits.push(food);
    this.cdr.markForCheck(); // 通知Angular检查组件及其子组件的变更
    // 或者用 this.cdr.detectChanges(); 直接触发当前组件的变更检测
  }
  

• 方案3：检查是否意外启用了OnPush策略
  如果你没特意设置changeDetection: ChangeDetectionStrategy.OnPush，但还是出现了这个问题，建议检查组件的元数据，确认有没有不小心开启了OnPush——一旦开启OnPush，只有当输入属性引用变化、组件内部事件触发，或者手动触发变更检测时，视图才会更新，这时候push因为没改变引用，自然不会生效。

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