在Angular中什么情况下会引起变更检测

在Angular中，简单来说，变更检测就是Angular用来检测视图与模型之间绑定的值是否发生了改变，当检测到模型中的值发生改变时，则同步到视图上，反之，当检测到视图上的值发生改变时，则回调对应的绑定函数。也就是，把模型的变化和视图保持一致的机制，这种机制就称为变更检测。下面来一起看一下在Angular中什么情况下会引起变更检测，希望能给大家带来帮助。

在Angular中什么情况下会引起变更检测

检测的关键在于如何最小粒度地检测到绑定的值是否发生了改变，那么在什么情况下会导致这些绑定的值发生变化呢？结合日常开发，下面我们一起来看几种场景。

组件初始化：

当启动 Angular 应用程序时，Angular 会加载引导组件并触发 ApplicationRef.tick() 来调用变更检测和视图渲染。

DOM和BOM事件：

DOM 事件或BOM事件侦听器可以更新 Angular 组件中的数据，还可以触发变更检测，如下例所示。

@Component({
  selector: "counter",
  template: `
    Count：{{ count }}
    <br />
    <button (click)="add()">Add</button>
  `,
})
export class CounterComponent {
  count = 0;
 
  constructor() {}
 
  add() {
    this.count = this.count + 1;
  }
}

我们在视图上通过插值表达式绑定了counter中的count属性，当点击按钮时，改变了count属性的值，这时就导致了绑定的值发生了变化。

HTTP数据请求：

@Component({
    selector: "todos",
    template: ` <li *ngFor="let item of todos">{{ item.titme }}</li> `,
  })
  export class TodosComponent implements OnInit {
    public todos: TodoItem[] = [];
 
    constructor(private http: HttpClient) {}
 
    ngOnInit() {
      this.http.get<TodoItem[]>("/api/todos").subscribe((todos: TodoItem[]) => {
        this.todos = todos;
      });
    }
  }

我们在todos这个组件里向服务端发送了一个Ajax请求，当请求返回结果时，会改变视图中绑定的todos的值。

其他宏任务和微任务：

比如 setTimeout() 或 setInterval()。你还可以在 setTimeout() macroTask 的回调函数中更新数据。

@Component({
  selector: 'app-root',
  template: '<div>{{data}}</div>';
})
export class AppComponent implements OnInit {
  data = 'initial value';
 
  ngOnInit() {
    setTimeout(() => {
      // user does not need to trigger change detection manually
      this.data = 'value updated';
    });
  }
}

实际开发中可能会在某一个函数里调用定时器去改变一个绑定的值。

再比如 Promise.then() 。其他异步 API（比如 fetch）会返回 Promise 对象，因此 then() 回调函数也可以更新数据。

@Component({
  selector: 'app-root',
  template: '<div>{{data}}</div>';
})
export class AppComponent implements OnInit {
  data = 'initial value';
 
  ngOnInit() {
    Promise.resolve(1).then(v => {
      // user does not need to trigger change detection manually
      this.data = v;
    });
  }
}

除了 addEventListener()，setTimeout() 和 Promise.then() ，还有其他一些操作可以异步更新数据。比如 WebSocket.onmessage() 和 Canvas.toBlob() 。

不难发现，上述几种情况都有一个共同点，就是导致绑定值发生改变的事件都是 异步事件。只要发生了异步操作，Angular就会认为有状态可能发生了变化，然后进行变更检测。

这些包含了应用程序可能会在其中更改数据的最常见的场景。只要Angular检测到数据可能已更改，就会进行变更检测，变更检测的结果是根据这些新数据DOM被更新。Angular 会以不同的方式检测变化。对于组件初始化，Angular 调用显式变更检测。对于异步操作，Angular 会使用 Zone 在数据可能被修改的地方检测变化，并自动运行变更检测。

以上就是在Angular中什么情况下会引起变更检测的详细解析，翼速应用平台内有更多相关资讯，欢迎查阅！