Angular中變化檢測(cè)的示例分析

這篇文章主要為大家展示了“Angular中變化檢測(cè)的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Angular中變化檢測(cè)的示例分析”這篇文章吧。

10年積累的成都做網(wǎng)站、網(wǎng)站制作經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有廣東免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

Change Detection (變化檢測(cè)) 是 Angular 2 中最重要的一個(gè)特性。當(dāng)組件中的數(shù)據(jù)發(fā)生變化的時(shí)候，Angular 2 能檢測(cè)到數(shù)據(jù)變化并自動(dòng)刷新視圖反映出相應(yīng)的變化。

在介紹變化檢測(cè)之前，我們要先介紹一下瀏覽器中渲染的概念，渲染是將模型映射到視圖的過程。模型的值可以是 JavaScript 中的原始數(shù)據(jù)類型、對(duì)象、數(shù)組或其他數(shù)據(jù)對(duì)象。然而視圖可以是頁面中的段落、表單、按鈕等其他元素，這些頁面元素內(nèi)部使用 DOM(Document Object Model) 來表示，為了更好地理解，我們來看一個(gè)具體的示例：

<h5 id="greeting"></h5> <script> document.getElementById("greeting").innerHTML = "Hello World!"; </script>

這個(gè)例子很簡(jiǎn)單，因?yàn)槟Ｐ筒粫?huì)變化，所以頁面只會(huì)渲染一次。如果數(shù)據(jù)模型在運(yùn)行時(shí)會(huì)不斷變化，那么整個(gè)過程將變得復(fù)雜。因此為了保證數(shù)據(jù)與視圖的同步，頁面將會(huì)進(jìn)行多次渲染。接下來我們來考慮一下以下幾個(gè)問題：

1、什么時(shí)候模型會(huì)發(fā)生變化

2、模型產(chǎn)生了什么變化

3、變化后需要更新的視圖區(qū)域在哪里

4、怎么更新對(duì)應(yīng)視圖區(qū)域

而變化檢測(cè)的基本目的就是解決上述問題。在 Angular 2 中當(dāng)組件內(nèi)的模型發(fā)生變化的時(shí)候，組件內(nèi)的變化檢測(cè)器就會(huì)檢測(cè)到更新，然后通知視圖刷新。因此變化檢測(cè)器有兩個(gè)主要的任務(wù)：

1、檢測(cè)模型的變化

2、通知視圖刷新

接下來我們來分析一下什么是變化，變化是怎么產(chǎn)生的。

變化和事件

變化是舊模型與新模型之間的區(qū)別，換句話說變化產(chǎn)生了一個(gè)新的模型。讓我們來看一下下面的代碼：

import { Component } from '@angular/core'; @Component({
 selector: 'exe-counter',
 template: `
 <p>當(dāng)前值：{{ counter }}</p>
 <button (click)="countUp()"> + </button>` }) export class CounterComponent {
 counter = 0;

 countUp() { this.counter++;
 }
}

頁面首次渲染完后，計(jì)數(shù)器的當(dāng)前值為0。當(dāng)我們點(diǎn)擊 + 按鈕時(shí)，計(jì)數(shù)器的 counter 值將會(huì)自動(dòng)加1，之后頁面中當(dāng)前值也會(huì)被更新。在這個(gè)例子中，點(diǎn)擊事件引起了 counter 屬性值的變化。

我們繼續(xù)看下一個(gè)例子：

import { Component, OnInit } from '@angular/core'; @Component({
 selector: 'exe-counter',
 template: `
  <p>當(dāng)前值：{{ counter }}</p>
 ` }) export class CounterComponent implements OnInit {
 counter = 0;
 ngOnInit() {
  setInterval(() => { this.counter++;
  }, 1000);
 }
}

該組件通過 setInterval 定時(shí)器，實(shí)現(xiàn)每秒鐘 counter 值自動(dòng)加1。在這種情況下，它是定時(shí)器事件引起了屬性值的變化。最后我們?cè)賮砜磦€(gè)例子：

import { Component, OnInit } from '@angular/core'; import { Http } from '@angular/http'; @Component({
 selector: 'exe-counter',
 template: `
  <p>當(dāng)前值：{{ counter }}</p>
 ` }) export class CounterComponent implements OnInit {
 counter = 0; constructor(private http: Http) {}
 ngOnInit() { this.http.get('/counter-data.json')
    .map(res => res.json())
    .subscribe(data => { this.counter = data.value;
    });
 }
}

該組件在進(jìn)行初始化的時(shí)候，會(huì)發(fā)送一個(gè) HTTP 請(qǐng)求去獲取初始值。當(dāng)請(qǐng)求成功返回的時(shí)候，組件的 counter 屬性的值會(huì)被更新。在這種情況下，它是由 XHR 回調(diào)引起了屬性值的變化。

現(xiàn)在我們來總結(jié)一下，引起模型變化的三類事件源：

1、Events：click, mouseover, keyup ...

2、Timers：setInterval、setTimeout

3、XHRs：Ajax(GET、POST ...)

這些事件源有一個(gè)共同的特性，即它們都是異步操作。那我們可以這樣認(rèn)為，所有的異步操作都有可能會(huì)引起模型的變化。

以上是“Angular中變化檢測(cè)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前題目：Angular中變化檢測(cè)的示例分析
轉(zhuǎn)載源于：http://muchs.cn/article24/jpjoce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、虛擬主機(jī)、網(wǎng)站維護(hù)、全網(wǎng)營銷推廣、商城網(wǎng)站、網(wǎng)站收錄

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)