angularjs - AngularJS 如何实现它的双向数据绑定(bind)机制？

Question

AngularJS 允许你实现双向数据绑定(bind)。然而，有趣的部分是它如何检测模型变化？模型通常是一个普通的对象，如下面的代码。我们可以更改$scope.user的name属性但是 AngularJS 是如何检测模型变化的呢？ AngularJS 是否枚举 $scope 的所有属性？目的？

angular.module('myApp', [])
      .controller('BusinessCardController', function($scope){
        $scope.user = {
          name: 'Tanay Pant'
        }
      });

<input type="text" ng-model="user.name" placeholder="Full Name" />

Answer 1

有一个摘要循环，作用域检查所有 $watch 表达式并将它们与之前的值进行比较。它查看对象模型的更改，如果旧值与新值不同，AngularJS 将更新适当的位置，也就是脏检查。

为了执行摘要循环$apply(fn)必须运行，这就是你从 JavaScript 进入 Angular 世界的方式。 $apply(fn)如何被调用(取自 AngularJs integration with browser ):

浏览器的事件循环等待事件到达。事件是用户交互、计时器事件或网络事件(来自服务器的响应)。

事件的回调被执行。这将进入 JavaScript 上下文。回调可以修改 DOM 结构。

回调执行后，浏览器会离开 JavaScript 上下文并根据 DOM 更改重新渲染 View 。

Data Binding

Digest Cycle Explanation

为了实现双向绑定(bind)，指令注册观察者。为了使页面快速高效，我们需要尝试减少我们创建的所有这些观察者。所以你在使用双向绑定(bind)时应该小心——即只在你真正需要的时候使用它。否则使用单向:
<h1> {{ ::vm.title }} </h1>
很明显，当用户在页面上时，页面的标题可能不会改变——或者如果它改变了，则需要查看新的标题。所以我们可以使用 ::在模板链接阶段注册单向绑定(bind)。

我看到的观察者爆炸的主要问题是具有数百行的网格。如果这些行有很多列，并且在每个单元格中都有双向数据绑定(bind)，那么您就可以大饱眼福了。您可以像在现代时代一样坐下来等待页面加载!