AngularJS：AngularJS 应用中的数据与视图的绑定原理和实现方式-JavaScript中文网-JavaScript教程资源分享门户

在 AngularJS 中，数据与视图之间的绑定是一个非常重要的概念。当数据变化时，AngularJS 会自动更新视图，反之亦然，这使得开发者可以更加专注于逻辑的编写，而不必过多的关注 DOM 的操作。

数据与视图的绑定原理

AngularJS 中的数据绑定主要分为以下两种方式：

双向数据绑定

双向数据绑定是指在视图中对数据进行修改后，数据会自动同步更新，反之亦然。这个特性是由 AngularJS 中的 ng-model 指令来实现的。当 ng-model 指令被绑定在某个表单元素上时，AngularJS 会自动监控该表单元素的 value 值，同时也会监听 scope 上实际数据的变化，一旦数据变化，视图会自动更新，反之亦然。

<!-- template.html -->
<input type="text" ng-model="message">
<p>{{message}}</p>

// controller.js
// $scope 是一个对象，代表着当前视图的作用域，它与模板中的 {{}} 绑定在一起
$scope.message = 'Hello, World!';

当输入框的内容发生变化时，展示 hello world 的 <p> 元素的内容也会自动更新，反之亦然。

单向数据绑定

单向数据绑定是指数据只能从 model 安全地流向 view，一旦数据变化了，它就不会自动进行更新。这个特性是指当程序员对数据进行了手动更新时，视图才会发生变化。

<!-- template.html -->
<p>You clicked the button {{count}} times.</p>
<button ng-click="count = count + 1">Click me</button>

// controller.js
$scope.count = 0;

在单向数据绑定中，我们声明了一个 count 的变量，然后将其绑定在 <p> 元素上，每当用户点击按钮时它的值会加 1，但这个值不会直接同步到 <p> 元素上，需要程序员手动写逻辑去更新视图。

数据与视图的绑定实现方式

双向数据绑定和单向数据绑定的实现方式是不同的。在 AngularJS 中，双向数据绑定是通过著名的脏检查机制实现的，而单向数据绑定是通过指令和模板工作流程实现的。

脏检查机制

AngularJS 中的脏检查机制是通过异步执行的方式实现的，具体流程如下：

应用启动时，启动一个遍历所有 watcher 的循环，这个循环叫做“digest cycle”（脏检查循环）；
循环中所有被监视的变量都会执行一遍 getter，如果 getter 的返回值与上一次不同，则会将其添加到脏值（dirty）列表中；
循环结束后，检查脏值列表是否为空，如果非空，则遍历执行所有的 watcher；
watcher 里执行新旧值比较，如果一致，则退出；如果不一致，则执行相应操作，并将脏值列表标记为已处理；
重复以上步骤直到脏值列表为空；

这样一来，就保证了所有的数据变化都能够在视图中得到体现。但是，脏检查机制存在严重的性能问题。因为每次监控变量的返回值都需要执行 getter 函数，这样无疑势必会消耗大量的 CPU 资源，因此它的效率是有限的。

指令和模板的工作流程

单向数据绑定是通过指令和模板工作流程来实现的，这里通过一个例子来详细讲解其实现方式。

<!-- template.html -->
<div>
  <h1>{{title}}</h1>
  <ul>
    <li ng-repeat="item in items">{{item}}</li>
  </ul>
</div>

// controller.js
$scope.title = 'My List Title';
$scope.items = ['Item 1', 'Item 2', 'Item 3'];

在这个例子中，我们使用了 AngularJS 中常用的两个指令，分别是 ng-model 和 ng-repeat 指令。

对于 ng-model 指令，AngularJS 会自动监控输入框的值，当输入框的值发生变化时，AngularJS 会自动更新绑定在它上面的 $scope 变量，这样我们就可以通过控制器里的变量来修改视图中的数据。

对于 ng-repeat 指令，它会在 $scope.items 发生变化时重新渲染模板，这样我们就可以动态地渲染视图。

以上就是单向数据绑定的实现方式，它相比双向数据绑定更高效，适合在很多列表和表格的场景中使用。

总结

AngularJS 中的数据与视图的绑定是一个非常重要的核心概念，在实际开发中被广泛地应用。本文主要从数据与视图的绑定原理和实现方式两个方面对其进行了详细的讲解，并且介绍了 AngularJS 中的双向数据绑定和单向数据绑定两种绑定方式的区别和实现方式。通过本文的学习，希望读者们能够更加深入地理解 AngularJS 中数据与视图的绑定机制，为实际工作中的应用打下坚实的基础。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/654064277d4982a6eb9e0798