AngularJS 有点烦的双向绑定-JavaScript中文网-JavaScript教程资源分享门户

什么是 AngularJS 双向绑定？

AngularJS 是一种流行的前端 JavaScript 框架，其最大的特点就是双向数据绑定。简单来说，双向数据绑定指的是当 Model 数据发生变化时，会自动更新 View 层的表现形式，同时当 View 层数据更新时也能自动更新 Model 数据。

例如，我们在 View 中通过 ng-model 指令绑定输入框与控制器中的某个属性，当用户在输入框中输入内容时，控制器中的对应属性值就会自动更新。

<input type="text" ng-model="username">

app.controller('MyCtrl', function($scope) {
    $scope.username = 'John Doe';
});

这种双向绑定机制使得 AngularJS 应用开发变得非常高效方便。但随着应用变得越来越复杂，双向绑定机制也会变得越来越烦。

数据的不确定性：由于数据可以被任意修改，数据的来源、修改、过期等情况需要非常小心的处理，否则可能会导致数据一致性问题。
性能问题：使用双向绑定机制会增加监测时间和内存占用，可以导致应用卡顿、性能下降等问题。
调试困难：双向绑定机制是 AngularJS 应用的核心机制，但它对 AngularJS 内部的实现细节非常依赖。这使得开发人员很难理解应用的工作原理和调试问题。

虽然双向绑定有它自己的问题，但 AngularJS 团队仍然在持续改进和完善这一机制，同时也有一些工具和技巧可以帮助我们使用 AngularJS 开发更好的应用。

单向数据绑定就是只有从 Model 向 View 层单向传递数据的绑定机制，本身不包含复杂的逻辑，更加清晰简洁和方便对数据进行维护。单向绑定的应用场景通常是需要从视图层向模型层中写入数据时，使用单向绑定可以更好的将数据传递到模型层进行处理。

<div ng-bind="greeting"></div>

app.controller('MyCtrl', function($scope) {
    $scope.greeting = 'Hello World';
});

如果某个组件的数据只需要绑定一次时，则可以使用一次性绑定，一次性绑定的语法为 {{::expr}} ，表示该表达式只会被绑定一次。

使用一次性绑定可以减小数据的监控和内存占用，提高应用的性能。

<div>{{::greeting}}</div>

app.controller('MyCtrl', function($scope) {
    $scope.greeting = 'Hello World';
});

当 AngularJS 应用变得非常复杂时，某些模块可能没有必要被监测。在这种情况下，可以使用 $scope.$watch 方法监测特定的属性或表达式。

$scope.$watch('greeting', function(newValue, oldValue) {
    console.log(newValue, oldValue);
});

Immutable 数据结构是指数据一旦创建，就不能被修改的数据结构。Immutable 数据结构能够避免数据的随意修改，从而保证数据的一致性。

使用 Immutable 数据结构可以避免数据的不确定性问题，减小双向绑定带来的数据一致性问题。

在 AngularJS 应用中常常使用 Immutable.js 库。

<div>{{list.get(0).name}}</div>

var myList = Immutable.List.of(
    {name: 'Mary'},
    {name: 'John'},
);
$scope.list = myList;

AngularJS 的双向绑定机制是这个框架的核心特色之一，虽然带来了很大的方便性，但同时也存在一些问题，如性能下降、数据不确定性、调试困难等。通过使用一些技巧和工具，我们可以减少这些问题的影响，提高 AngularJS 应用的质量和性能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6461ebb2968c7c53b034113c