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刪除

JavaScript數據類型：瀏覽器和nodejs之間是否有區別？May 14, 2025 am 12:15 AM

JavaScript核心數據類型在瀏覽器和Node.js中一致，但處理方式和額外類型有所不同。 1)全局對像在瀏覽器中為window，在Node.js中為global。 2)Node.js獨有Buffer對象，用於處理二進制數據。 3)性能和時間處理在兩者間也有差異，需根據環境調整代碼。

JavaScript評論：使用//和 / * * / * / * /May 13, 2025 pm 03:49 PM

JavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

See all articles