扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > 其他 >Angular中什么是变更检测？什么情况下会引起变更检测？
  • 317

0
分享到

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

Angular变更检测 2023-05-14 21:05:37 317人浏览 独家记忆
摘要

angular中什么是变更检测？下面本篇文章带大家了解一下变更检测，并介绍一下什么情况下会引起变更检测，希望对大家有所帮助！什么是变更检测？简单来说，变更检测就是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 = 'initialValue';
    // initial rendering
    detectChange();

    function renderHTML() {
      document.getElementById('dataDiv').innerText = value;
    }

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

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

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

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

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

    // Example 5: some other asynchronous apis
    document.getElementById('canvas').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: '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中什么是变更检测？什么情况下会引起变更检测？的详细内容，更多请关注编程网其它相关文章！

--结束END--

本文标题: Angular中什么是变更检测？什么情况下会引起变更检测？

本文链接: https://lsjlt.com/news/205852.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Angular中什么是变更检测？什么情况下会引起变更检测？
    Angular中什么是变更检测？下面本篇文章带大家了解一下变更检测，并介绍一下什么情况下会引起变更检测，希望对大家有所帮助！什么是变更检测？简单来说，变更检测就是Angular用来检测视图与模型之间绑定的值是否发生了改变，当检测到模型中的值...
    99+
    2023-05-14
    Angular 变更检测
  • Angular变更检测是怎么引起的
    本篇内容介绍了“Angular变更检测是怎么引起的”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！什么是变更检测？简单来说，变更检测就是Ang...
    99+
    2023-07-04
  • angular变更检测机制是什么
    Angular的变更检测机制是通过比较当前视图和上一次视图的状态来确定是否需要更新视图。它基于Zone.js库，通过Zone来跟踪和...
    99+
    2023-10-24
    angular
  • Angular变更检测中的DOM更新机制是什么
    这篇文章主要介绍“Angular变更检测中的DOM更新机制是什么”，在日常操作中，相信很多人在Angular变更检测中的DOM更新机制是什么问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Angular变更检测...
    99+
    2023-07-04
  • Angular中如何实现变更检测
    小编给大家分享一下Angular中如何实现变更检测，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一、Angular 的 DOM ...
    99+
    2024-04-02
  • Angular中的变更实例检测分析
    本篇内容介绍了“Angular中的变更实例检测分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！Angul...
    99+
    2024-04-02
  • Angular中变更检测的示例分析
    这篇文章主要介绍Angular中变更检测的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！核心概念-视图ViewAngular的文档中通篇都提到了一个Angular应用是一个组件树。但是Angular底层其实使...
    99+
    2023-06-14
  • 浅析Angular变更检测中的DOM更新机制
    变更检测是Angular中很重要的一部分，也就是模型和视图之间保持同步。在日常开发过程中，我们无需了解变更检测，因为Angular都帮我们完成了这一部分工作，让开发人员更加专注于业务实现，提高开发效率和开发体验。但是如果想要深入使用框架，或...
    99+
    2023-05-14
    DOM更新机制 变更检测 前端 Angular.js
  • Angular中的onPush变更检测策略有哪些
    这篇文章给大家介绍Angular中的onPush变更检测策略有哪些，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。默认的变更检测策略默认情况下，Angular使用ChangeDetect...
    99+
    2024-04-02
  • Angular变更检测机制怎么进行性能优化
    本篇内容介绍了“Angular变更检测机制怎么进行性能优化”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！什...
    99+
    2024-04-02
  • 浅析Angular变更检测中的订阅异步事件
    在上一篇文章中，我们介绍了具体什么是变更检测，用一个原生JS例子来更好的去理解变更检测，以及介绍了在哪些场景下会触发变更检测。前文中总结了5种工作中常见的场景，但是我们需要先思考一下，Angular的变更检测是否支持所有的异步事件呢？如果支...
    99+
    2023-05-14
    订阅异步事件 Angular 变更检测
  • Angular变更检测中的订阅异步事件怎么实现
    今天小编给大家分享一下Angular变更检测中的订阅异步事件怎么实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。如何订阅异...
    99+
    2023-07-04
  • Vue不能检测到Object/Array更新的情况怎么办
    这篇文章主要为大家展示了“Vue不能检测到Object/Array更新的情况怎么办”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue不能检测到Object/A...
    99+
    2024-04-02
  • angular的变更机制是什么
    本篇内容主要讲解“angular的变更机制是什么”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“angular的变更机制是什么”吧!一、什么是变更检测概括： 一种...
    99+
    2024-04-02
  • php检测变量是否为空的方法是什么
    在 PHP 中，可以使用以下方法来检测变量是否为空： 使用 empty() 函数：empty() 函数可以检测变量是否为空，如果变...
    99+
    2024-03-06
    php
  • shell脚本怎么实现实时检测文件变更
    这篇文章主要讲解了“shell脚本怎么实现实时检测文件变更”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“shell脚本怎么实现实时检测文件变更”吧！使用python做web开发,现在流行使用...
    99+
    2023-06-09
  • Vue不能检测数组变动的原因是什么
    小编给大家分享一下Vue不能检测数组变动的原因是什么，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！问题来源：https://se...
    99+
    2024-04-02
  • GO中什么情况会使用变量逃逸
    目录C 程序GO 程序GO 的逃逸是啥样子的？你知道 GO 中什么情况会变量逃逸吗？首先我们先来看看什么是变量逃逸 Go 语言将这个以前我们写 C/C++ 时候需要做的内存规划和分配...
    99+
    2023-02-14
    GO 变量逃逸
  • Vue实现自动检测及版本更新的方法是什么
    这篇“Vue实现自动检测及版本更新的方法是什么”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue实现自动检测及版本更新的方...
    99+
    2023-07-05
  • MongoDB中什么情况下索引会选择策略
    这篇“MongoDB中什么情况下索引会选择策略”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“MongoDB中什么情况下索引会...
    99+
    2023-06-29
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作