Angular中什么是变更检测？什么情况下会引起变更检测？-js教程-PHP中文网

什么是变更检测？

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

首页

web前端

js教程

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

青灯夜游

Dec 13, 2022 pm 08:06 PM

angular 变更检测

Angular中什么是变更检测？下面本篇文章带大家了解一下变更检测，并介绍一下什么情况下会引起变更检测，希望对大家有所帮助！

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

什么是变更检测？

简单来说，变更检测就是Angular用来检测视图与模型之间绑定的值是否发生了改变，当检测到模型中的值发生改变时，则同步到视图上，反之，当检测到视图上的值发生改变时，则回调对应的绑定函数。【相关教程推荐：《angular教程》】

也就是，把模型的变化和视图保持一致的机制，这种机制，我们称为变更检测。

在Angular里，开发者无需把精力放到具体的DOM更新上，关注与业务就可以了，因为这部分工作Angular帮我们做了。

如果不用Angular的话，用原生的JS开发，我们必须手动的去更新DOM，先来看一个例子。

<html>
  <div id="dataDiv"></div>
  <button id="btn">updateData</button>
  <canvas id="canvas"></canvas>
  <script>
    let value = &#39;initialValue&#39;;
    // initial rendering
    detectChange();

    function renderHTML() {
      document.getElementById(&#39;dataDiv&#39;).innerText = value;
    }

    function detectChange() {
      const currentValue = document.getElementById(&#39;dataDiv&#39;).innerText;
      if (currentValue !== value) {
        renderHTML();
      }
    }

    // Example 1: update data inside button click event handler
    document.getElementById(&#39;btn&#39;).addEventListener(&#39;click&#39;, () => {
      // update value
      value = &#39;button update value&#39;;
      // call detectChange manually
      detectChange();
    });

    // Example 2: HTTP Request
    const xhr = new XMLHttpRequest();
    xhr.addEventListener(&#39;load&#39;, function() {
      // get response from server
      value = this.responseText;
      // call detectChange manually
      detectChange();
    });
    xhr.open(&#39;GET&#39;, serverUrl);
    xhr.send();

    // Example 3: setTimeout
    setTimeout(() => {
      // update value inside setTimeout callback
      value = &#39;timeout update value&#39;;
      // call detectChange manually
      detectChange();
    }, 100);

    // Example 4: Promise.then
    Promise.resolve(&#39;promise resolved a value&#39;).then(v => {
      // update value inside Promise thenCallback
      value = v;
      // call detectChange manually
      detectChange();
    }, 100);

    // Example 5: some other asynchronous APIs
    document.getElementById(&#39;canvas&#39;).toBlob(blob => {
      // update value when blob data is created from the canvas
      value = `value updated by canvas, size is ${blob.size}`;
      // call detectChange manually
      detectChange();
    });
  </script>
</html>

登录后复制

在上面的例子中，我们更新数据后，需要调用detectChange() 来检查数据是否已更改。如果数据已经更改，则渲染HTML以反应更新的数据。当然，在Angular中，开发者无需关心这些步骤，只需要更新你的数据就可以了，DOM会自动更新。这就是变更检测。

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

变更检测的关键在于如何最小粒度地检测到绑定的值是否发生了改变，那么在什么情况下会导致这些绑定的值发生变化呢？

结合日常开发，来看几种场景。

场景一

组件初始化：

当启动 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: &#39;app-root&#39;,
  template: &#39;<div>{{data}}</div>&#39;;
})
export class AppComponent implements OnInit {
  data = &#39;initial value&#39;;

  ngOnInit() {
    setTimeout(() => {
      // user does not need to trigger change detection manually
      this.data = &#39;value updated&#39;;
    });
  }
}

登录后复制

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

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

@Component({
  selector: &#39;app-root&#39;,
  template: &#39;<div>{{data}}</div>&#39;;
})
export class AppComponent implements OnInit {
  data = &#39;initial value&#39;;

  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中什么是变更检测？什么情况下会引起变更检测？的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1655

CakePHP 教程

1413

Laravel 教程

1306

PHP教程

1252

C# 教程

1226

显示更多

Related knowledge

聊聊Angular中的元数据（Metadata）和装饰器（Decorator） Feb 28, 2022 am 11:10 AM

本篇文章继续Angular的学习，带大家了解一下Angular中的元数据和装饰器，简单了解一下他们的用法，希望对大家有所帮助！

如何在Ubuntu 24.04上安装Angular Mar 23, 2024 pm 12:20 PM

Angular.js是一种可自由访问的JavaScript平台，用于创建动态应用程序。它允许您通过扩展HTML的语法作为模板语言，以快速、清晰地表示应用程序的各个方面。Angular.js提供了一系列工具，可帮助您编写、更新和测试代码。此外，它还提供了许多功能，如路由和表单管理。本指南将讨论在Ubuntu24上安装Angular的方法。首先，您需要安装Node.js。Node.js是一个基于ChromeV8引擎的JavaScript运行环境，可让您在服务器端运行JavaScript代码。要在Ub

一文探究Angular中的服务端渲染(SSR) Dec 27, 2022 pm 07:24 PM

你知道 Angular Universal 吗？可以帮助网站提供更好的 SEO 支持哦！

angular学习之详解状态管理器NgRx May 25, 2022 am 11:01 AM

本篇文章带大家深入了解一下angular的状态管理器NgRx，介绍一下NgRx的使用方法，希望对大家有所帮助！

Angular + NG-ZORRO快速开发一个后台系统 Apr 21, 2022 am 10:45 AM

本篇文章给大家分享一个Angular实战，了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统，希望对大家有所帮助！

浅析angular中怎么使用monaco-editor Oct 17, 2022 pm 08:04 PM

angular中怎么使用monaco-editor？下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用，希望对大家有所帮助！

如何使用PHP和Angular进行前端开发 May 11, 2023 pm 04:04 PM

随着互联网的飞速发展，前端开发技术也在不断改进和迭代。PHP和Angular是两种广泛应用于前端开发的技术。PHP是一种服务器端脚本语言，可以处理表单、生成动态页面和管理访问权限等任务。而Angular是一种JavaScript的框架，可以用于开发单页面应用和构建组件化的Web应用程序。本篇文章将介绍如何使用PHP和Angular进行前端开发，以及如何将它们

使用Angular和Node进行基于令牌的身份验证 Sep 01, 2023 pm 02:01 PM

身份验证是任何Web应用程序中最重要的部分之一。本教程讨论基于令牌的身份验证系统以及它们与传统登录系统的区别。在本教程结束时，您将看到一个用Angular和Node.js编写的完整工作演示。传统身份验证系统在继续基于令牌的身份验证系统之前，让我们先看一下传统的身份验证系统。用户在登录表单中提供用户名和密码，然后点击登录。发出请求后，通过查询数据库在后端验证用户。如果请求有效，则使用从数据库中获取的用户信息创建会话，然后在响应头中返回会话信息，以便将会话ID存储在浏览器中。提供用于访问应用程序中受

See all articles

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

什么是变更检测？

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题