浅谈AngularJs 双向绑定原理(数据绑定机制)

什么是双向绑定

双向绑定指的是将视图和模型之间的数据绑定在一起，使得当视图的数据发生变化时，模型中的数据也会自动更新；同样，当模型中的数据被修改时，视图中的数据也会跟着改变。这种机制可以减轻开发人员的负担，提高开发效率。

AngularJs 中双向绑定的原理

AngularJs 是一种基于MVVM模型的框架，其中的双向绑定机制就是依赖于“脏检查”机制实现的。AngularJs 在内存中创建了一个监控器(scope对象)，用来监控model数据模型的变化。当view视图层发生变化时，AngularJs 会主动对比model和view，如果发现两者状态不一致则自动更新相关数据，并且重新渲染到view视图中。

双向绑定示例1

<!DOCTYPE html>
<html>
<head>
  <title>双向绑定示例1</title>
  <meta charset="UTF-8">
  <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.0/angular.min.js"></script>
</head>
<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <input type="text" ng-model="name">
    <h1>Hello, {{name}}</h1>
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.name = 'AngularJs';
    });
  </script>
</body>
</html>

如上示例所示，其中 <input> 标签中的 ng-model="name" 属性用来与 myCtrl 控制器中的 $scope 中的 name 变量进行双向绑定。当输入框中的内容发生改变时，视图层变化，自动将变化的值更新到 $scope.name 中，从而完成了双向绑定的功能。

双向绑定示例2

<!DOCTYPE html>
<html>
<head>
  <title>双向绑定示例2</title>
  <meta charset="UTF-8">
  <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.0/angular.min.js"></script>
</head>
<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <ul>
      <li ng-repeat="name in names">{{name}}</li>
    </ul>
  </div>
  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
      $scope.names = ['AngularJs', 'React', 'Vue'];
    });
  </script>
</body>
</html>

如上示例中，用 ng-repeat 指令将 $scope.names 数组中的成员循环遍历出来，最终显示在 ul 列表中。

如果页面中需要实时更新$scope.names 数组中的数据，可以在 myCtrl 控制器中添加如下代码：

setInterval(function () {
  $scope.$apply(function () {
    $scope.names.pop();
    $scope.names.unshift('AngularJs');
  })
}, 1000);

每隔1s中，将 $scope.names 数组中的最后一个元素删除，并将 AngularJs字符串插入到数组的最前面。由于这里使用了 $scope.$apply, AngularJs 会自动监测到 $scope.names 数据变化，再开始执行双向数据绑定，即视图层中的列表会随着数据的变化进行实时更新。

总结

在 AngularJs 中实现双向绑定的原理与机制主要依赖于“脏检查”机制， AngularJs 通过在内存中创建监控器(scope对象)，用来监控model数据模型的变化，当view视图层发生改变时，AngularJs 会主动对比model和view，如果发现两者状态不一致则自动更新相关数据，并且重新渲染到view视图中。由于这一机制的存在，AngularJs 的双向绑定功能可大大减轻开发人员的负担，提高开发效率。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅谈AngularJs 双向绑定原理(数据绑定机制) - Python技术站