扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >Angular变更检测是怎么引起的
  • 906

0
分享到

Angular变更检测是怎么引起的

2023-07-04 18:07:42 906人浏览 薄情痞子
摘要

本篇内容介绍了“angular变更检测是怎么引起的”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！什么是变更检测？简单来说，变更检测就是Ang

本篇内容介绍了“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/346995.html(转载时请注明来源链接)

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

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

  • 官方手机版

  • 微信公众号

  • 商务合作