简述 AngularJS 的数据双向绑定是怎么实现的？

八股文_Angular面试题 0 36

参考回答

AngularJS 的数据双向绑定是通过 $scope 对象和 脏检查 (dirty checking) 机制实现的。当视图中的数据发生变化时，AngularJS 会通过监听 DOM 事件将更改同步到模型；当模型发生变化时，AngularJS 会通过脏检查更新视图。

详细讲解与拓展

数据双向绑定的工作原理

模型到视图的绑定
- AngularJS 使用模板指令（如 {{}} 或 ng-bind）将模型绑定到视图中。
- 例如：
```
<div>{{name}}</div>
```
  当 `$scope.name` 发生变化时，视图中的 `{{name}}` 会自动更新。
视图到模型的绑定
- AngularJS 使用指令（如 ng-model）将视图中的用户输入绑定到模型中。
- 例如：
```
<input type="text" ng-model="name">
```
  当用户在输入框中输入内容时，`$scope.name` 会自动更新。
脏检查 (Dirty Checking)
- AngularJS 使用 $digest 循环来检查模型是否发生了变化。
- 每当一个事件（如用户输入、HTTP 请求等）触发时，AngularJS 会调用 $digest 方法遍历 $scope 上所有的 watcher。
- Watcher 是由 $scope.$watch 方法创建的，用于观察模型的变化：
```
$scope.$watch('name', function(newValue, oldValue) {
 console.log('name changed from', oldValue, 'to', newValue);
});
```

举例说明

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="name">
  <p>Hello, {{name}}</p>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('myCtrl', function( $scope) {$ scope.name = 'AngularJS';
  });
</script>

初始时，输入框显示为 “AngularJS”，段落显示 Hello, AngularJS。
当用户修改输入框时，$scope.name 会更新，段落的内容也会实时更新。

脏检查的性能问题

脏检查的一个特点是，当模型数据变多时，脏检查需要遍历的 watcher 数量也会增多，可能会造成性能瓶颈。
AngularJS 的 $digest 循环最多会执行 10 次，超出时会报错 10 $digest iterations reached，通常说明存在无限循环。

扩展知识：AngularJS 与 Angular 的数据绑定区别

AngularJS 使用脏检查实现数据双向绑定。
Angular（2+） 使用的是基于 Zone.js 的变更检测机制和单向数据流（通过 @Input 和 @Output 实现），相比 AngularJS 的脏检查更加高效。

总结

AngularJS 的数据双向绑定通过 $scope 对象、ng-model 指令以及脏检查机制实现。虽然它简化了开发流程，但也带来了性能问题。理解脏检查的工作原理可以帮助我们更好地优化 AngularJS 应用。