首頁 > 文章 > web前端 > AngularJS雙向資料綁定原理（詳細教學）

AngularJS雙向資料綁定原理（詳細教學）

亚连原創: 2018-06-08 17:57:102594瀏覽

這篇文章主要介紹了AngularJS雙向資料綁定原理之$watch、$apply和$digest的應用，具有一定的參考價值，有興趣的小夥伴們可以參考一下

引子

這篇文章是寫給AngularJS新手的，如果你已經對AngularJS的雙向資料綁定有了深入的了解，直接去閱讀原始碼好了。

背景

AngularJS開發者都想知道雙向資料綁定是怎麼實現的。與data-binding相關的術語琳瑯滿目： $watch,$apply,$digest,dirty-checking等等它們是如何運作的呢？讓我們從頭開始講起吧

AngularJS 的雙向資料綁定是被瀏覽器逼的

瀏覽器看上去很美，其實在資料互動這塊兒，由於瀏覽器的“不作為”，導致瀏覽器的資料刷新成為一個難題。具體來說，瀏覽器可以輕鬆監聽一個事件，例如：使用者點擊一個按鈕，或是在輸入框裡輸入東西，為此還提供了事件回調函數的API，事件的回調函數就會在javascript解釋器裡執行；但反過來就沒這麼簡單了，如果來自後台的數據發生了變化，需要通知給瀏覽器，讓瀏覽器刷新，瀏覽器並沒有提供這樣的數據交互機制，對於開發者來說，這是一個難以克服的障礙，該怎麼辦呢？ AngularJS出現了，它透過$scope 很好地實現了雙向資料綁定，背後的原理就是$watch,$apply,$digest,dirty-checking

##$watch 佇列（$watch list）

從字面上看，watch 是觀察的意思。每次將東西綁定到瀏覽器時，就會往$watch佇列插入一張$watch。想像一下$watch就是那個可以偵測它監視的model裡時候有變化的東西。例如你有如下的程式碼

User: <input type="text" ng-model="user" />
Password: <input type="password" ng-model="pass" />

這裡有個$scope.user，它被綁定在了第一個輸入框上，還有個$scope.pass，它被綁定在了第二個輸入框上；然後在$watch list裡面加入兩個$watch:

建立一個controllers.js 文件，程式碼如下：

app.controller(&#39;MainCtrl&#39;, function($scope) {
 $scope.foo = "Foo";
 $scope.world = "World";
});

對應的html 檔案, index.html 程式碼如下：

Hello, {{ World }}

這裡，即使在$scope上添加了兩個東西，但是只有一個綁定在了UI上，因此只生成了一個$watch. 再看下面的例子：

controllers.js

app.controller(&#39;MainCtrl&#39;, function($scope) {
 $scope.people = [...];
});

對應的html檔index.html

<ul>
 <li ng-repeat="person in people">
   {{person.name}} - {{person.age}}
 </li>
</ul>

#這樣看來，又產生了多個$watch。每個person有兩個（一個name，一個age），然後ng-repeat是一個循環，因此10個person一共是(2 * 10) 1,也就是說有21個$watch。因此，每一個綁定到了瀏覽器上的資料都會產生一個$watch。對，那這寫$watch是什麼時候產生的呢？先回顧下AngularJS的載入原理

AngularJS的載入原理：

AngularJS的範本載入分為編譯（compile）和連結（linking）兩個階段，在linking階段，AngularJS解譯器會尋找每個directive，然後產生每個需要的$watch。對了，$watch就是在這個階段生成的。

接下來，開始用到$digest了

$digest 循環

從字面上看，digest是「消化」的意思，總感覺這個名字怪怪的，跟不可思議的是dirty-checking，字面意思“髒檢查”，還是不翻譯為好。原作者的本意絕對不是這個意思，只可意會不可言傳！

$digest 是一個循環，它在循環做什麼呢？ $digest 在遍歷我們的$watch。 $digest 一個個問$watch —— 「嗨，你觀察的資料改變了沒？」

這個遍歷就是所謂的dirty-checking。既然所有的$watch都檢查完了，那就要問了：有沒有$watch更新過？如果有至少一個更新過，這個循環就會再次觸發，直到所有的$watch都沒有變化。這樣就能夠保證每個model都已經不會再改變。記住如果循環超過10次的話，它將會拋出一個異常，以免出現無限循環。當$digest循環結束時，DOM會相應地變化。

看段程式碼，例如： controllers.js

app.controller(&#39;MainCtrl&#39;, function() {
 $scope.name = "Foo";
 $scope.changeFoo = function() {
   $scope.name = "Bar";
 }
});

對應的html文件，index.html

{{ name }}
<button ng-click="changeFoo()">Change the name</button>

這裡只有一個$watch，因為ng-click不產生$ watch（函數是不會變的）。

$digest 執行的流程是：

在瀏覽器按下按鈕；
瀏覽器接收到一個事件，進入angular context。
$digest循環開始執行，查詢每個$watch是否有變化。
由於監視$scope.name的$watch報告了變化，它會強制再執行一次$digest循環。
新的$digest循環沒有偵測到變化，此時瀏覽器拿回控制權，更新與$scope.name新值對應部分的DOM。

從中可以看出AngularJS的一個明顯的不足：每一個進入angular context的事件都會執行一個$digest循環，哪怕僅僅是輸入一個字母，$digest 都會遍歷整個頁面的所有$watch。

$apply 的應用程式

Angular context 是整个Angular的上下文，也可以把它理解为Angular容器，那么，是谁来决定哪些事件可以进入 Angular Context，哪些事件又不能进入呢？其控制器在 $apply手上。

如果当事件触发时，调用$apply，它会进入angular context，如果没有调用就不会进入。你可能会问：刚才的例子并没有调用$apply，这是怎么回事呢？原来，是Angular背后替你做了。当点击带有ng-click的元素时，事件就会被封装到一个$apply调用中。如果有一个ng-model="foo"的输入框，当输入一个字母 f 时，事件就会这样调用，$apply("foo = 'f';")。

$apply的应用场景

$apply是$scope的一个函数，调用它会强制一次$digest循环。如果当前正在执行$apply循环，则会抛出一个异常。

如果浏览器上数据没有及时刷新，可以通过调用$scope.$apply() 方法，强行刷新一遍。

通过 $watch 监控自己的$scope

<!DOCTYPE html>
<html ng-app="demoApp">
<head>
 <title>test</title>
 <!-- Vendor libraries -->
  <script src="lib/jquery-v1.11.1.js"></script>
  <script src="lib/angular-v1.2.22.js"></script>
  <script src="lib/angular-route-v1.2.22.js"></script>
</head>
<body> 
 <p ng-controller="MainCtrl" >
  <input ng-model="name" />
  Name updated: {{updated}} times.
 </p> 
 <script >
  var demoApp = angular.module(&#39;demoApp&#39;,[]); 
  demoApp.controller(&#39;MainCtrl&#39;, function($scope) {
  $scope.name = "Angular";
  $scope.updated = -1;
  $scope.$watch(&#39;name&#39;, function() {
  $scope.updated++;
 });
});
 </script>
 </body>
</html>

代码说明：

当controller 执行到 $watch时，它会立即调用一次，所以把updated的值设为 -1 。上输入框中输入字符发生变化时，你会看到 updated 的值随之变化，而且能显示变化的次数。

$watch 检测到的数据变化

小结

我们对 AngularJS的双向数据绑定有了一个初步的认识，对于AngularJS来说，表面上看操作DOM很简单，其实背后有 $watch、$digest 、 $apply 三者在默默地起着作用。这个遍历检查数据是否发生变化的过程，称之为：dirty-checking。当你了解了这个过程后，你会对它嗤之以鼻，感觉这种方法好low 哦。确实，如果一个DOM中有 2000- 3000个 watch，页面的渲染速度将会大打折扣。

这个渲染的性能问题怎么解决呢？随着ECMAScript6的到来，Angular 2 通过Object.observe 极大地改善$digest循环的速度。或许，这就是为什么 Angular 团队迫不及待地推出 Angular 2 的原因吧。

上面是我整理给大家的，希望今后会对大家有帮助。

在vue-cli中如何配置babel配置文件

使用node.js实现抖音自动抢红包功能

使用webpack打包处理bundle.js文件过大的问题

以上是AngularJS雙向資料綁定原理（詳細教學）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：刷新頁面vuex資料不消失和不跳轉頁面問題（詳細教學）下一篇：刷新頁面vuex資料不消失和不跳轉頁面問題（詳細教學）

看更多