jstips 第 01 期深度解读：AngularJS 双向绑定核心 —— $digest 与 $apply 的机制、选型与性能优化

本文以 jstips 仓库第 01 期技巧（西班牙语版原文档）为骨架，系统剖析 AngularJS 双向数据绑定背后的 $digest 循环机制，厘清 $apply 与 $digest 两个核心方法的作用范围与内部调用链，并给出手动触发 digest 循环时的正确选型建议、错误处理写法与性能优化方案。读完你将掌握：什么场景该用 $apply、什么场景该用 $digest，以及为何 AngularJS 1.2.X 之后推荐改用 $evalAsync。

为什么必须理解 $digest：双向数据绑定的底层机制

AngularJS 最令人欣赏的特性之一就是双向数据绑定（two-way data binding）：模型（model）的变化会同步到视图（view），视图的变化也会同步回模型。要做到这一点，AngularJS 需要持续"评估"模型与视图之间的变化，而这个评估过程正是通过循环（$digest cycle）完成的。

用一句话概括它的工作方式：每当一个事件被触发时，AngularJS 会逐一检查每个 watcher（观察者），判断它们所监听的值是否发生了变化，这一轮检查就是我们所熟知的 $digest 循环。所有通过 ng-model、{{ }} 插值、ng-bind 等方式建立的绑定，都会注册为对应作用域上的 watcher，digest 循环只有在确认所有 watcher 都达到稳定（不再产生新变化）后才会结束。

大多数情况下，AngularJS 会在自己的事件体系（ng-click、ng-model 输入、$http 回调、$timeout 等）内自动触发 digest 循环，开发者无需干预。但在某些场景下——比如使用了原生 DOM 事件、第三方库回调或浏览器 API——AngularJS 并不知道发生了什么，此时你就需要手动强制它运行一轮新的 digest 循环。

恰恰因为 digest 循环是 AngularJS 中对性能影响最大的阶段之一，手动触发时必须选择正确的方法：选错作用范围，轻则多跑一轮全应用检查、白费性能，重则引发"已在进行 digest"之类的运行时错误。

$apply：显式启动整个应用的 digest 循环

$apply 是 AngularJS 作用域（Scope）上的核心方法，它允许你显式启动 digest 循环。调用 $apply 意味着：

• 所有 watcher 都会被检查，不只局限于当前作用域；
• 整个应用都会启动 $digest loop，从根作用域开始向下逐层检查；
• 内部实现上，$apply 在执行完可选的函数参数之后，会调用 $rootScope.$digest()（这正是"全应用范围"的来源——因为检查是从根作用域发起的）。

// 方式一：传递函数表达式（推荐）
$scope.$apply(() => {
    $scope.tip = 'Javascript Tip';
});

// 方式二：不传参数，仅触发一轮 digest 循环
// $scope.$apply();

注意示例中的箭头函数写法（对应 ES6 语法，即期技巧编号为 01、发布于 2016 年初的原文中所使用的写法）：

$scope.$apply(() => {
    $scope.tip = 'Javascript Tip';
});

传入函数的写法并非可有可无的装饰，它带来两个关键好处：

1. 错误处理机制：如果函数内部抛出异常，AngularJS 会在 digest 循环内统一捕获并交给 $exceptionHandler 处理，而不会让异常中断页面其他逻辑；
2. 变化整合：函数内对 scope 数据的修改会被纳入同一轮 digest 循环中一并评估，避免"改一次、跑一轮"的碎片化开销。

$digest：只针对当前作用域及其子作用域

与 $apply 的"全应用"语义不同，$digest 方法的粒度更小：它只在当前作用域（current scope）及其子作用域（children）上启动 $digest 循环。

这里有一个容易被忽视的关键点：父作用域（parent scopes）不会被检查，也不会受到影响。原因在于 $digest 是从调用它的那个 scope 出发、沿着子作用域链向下传播的；它不会向上回溯到父作用域，更不会波及兄弟分支或整个应用的其他部分。

// 只检查当前 scope 及其子 scope
$scope.$digest();

这意味着当你只需要更新当前作用域或它的子作用域时，$digest 是比 $apply 更精准的选择：它避免了一次针对整个应用的完整 digest 循环，性能收益是显而易见的。

$apply vs $digest：核心差异速查

对比维度	$apply()	$digest()
触发范围	整个应用（从 $rootScope 开始，所有 watcher 都被检查）	仅当前 scope 及其子 scope
父作用域	会被检查	不会被检查，也不受影响
内部调用	执行可选函数参数后调用 $rootScope.$digest()	直接从当前 scope 开始本轮循环
函数参数	支持传入函数表达式，自带错误处理机制	不支持类似封装
性能开销	较大，绑定（binding）数量多时可能引发性能问题	较小，范围被严格限定
典型场景	从 AngularJS 之外的 DOM 事件/第三方回调中同步数据	局部数据变更，仅需刷新当前 scope 子树

最佳实践：何时手动触发 digest，以及如何选型

原文档给出了四条极具操作性的建议，这里逐条展开并补充落地细节：

1. 仅在 AngularJS 之外的浏览器 DOM 事件触发时使用 $apply 或 $digest

AngularJS 内部的 ng-click、ng-change 等指令已经帮你处理好了 digest 触发，无需手动干预。真正需要手动调用的，是那些发生在 AngularJS 管辖范围之外的事件，例如：

• 原生 addEventListener / onclick 绑定的 DOM 事件；
• 第三方插件（jQuery 插件、图表库、拖拽库等）的回调；
• 非 Angular 的 setTimeout / setInterval 回调（注意：$timeout 与 $interval 服务已经内置了 digest 触发，应优先使用它们）。

2. 给 $apply 传递函数表达式，而不是只调用 $apply()

原文档特别强调：给 $apply 传递函数表达式，它会包含错误处理机制，并且允许把变化整合进 digest 循环中。前文已述，这既保证了异常可控，又避免了多次零散触发。

document.getElementById('btn').addEventListener('click', function () {
    // 原生事件在 AngularJS 之外，需要手动同步
    $scope.$apply(() => {
        $scope.tip = 'Javascript Tip';
    });
});

3. 只需更新当前作用域或其子作用域时，用 $digest

如果变更只影响当前 scope 以及它的子 scope，使用 $digest 就能避免在整个应用里再跑一轮新的 digest 循环。这在存在大量绑定、页面层级深的应用中尤其有价值——减少每一轮被检查的 watcher 数量，就是直接削减脏检查（dirty checking）的总耗时。

4. 警惕 $apply() 的高开销

$apply() 对运行时来说是一个开销相当大的处理过程，当页面存在大量 binding（绑定）时，频繁调用 $apply 可能引发明显的性能问题。因为每一轮全应用 digest 都会遍历根作用域以下的所有 watcher，绑定数量越多、层级越深，单轮耗时越长。所以能限定范围就限定范围，能合并触发就合并触发。

5. AngularJS 1.2.X 及以上版本，优先使用 $evalAsync

原文档给出的进阶建议：如果你正在使用 AngularJS 1.2.X 以上的版本，改用 $evalAsync。$evalAsync 是一个核心方法，它会把要执行的表达式安排在当前 digest 循环或下一轮 digest 循环中执行，从而：

• 避免因为手动触发而打断正在进行的 digest 循环（降低 "$digest already in progress" 类错误的风险）；
• 把多个数据变更合并到同一轮循环里统一评估，减少循环次数；
• 在整体上提升应用的性能表现。

// 适合在事件回调中安排数据更新
$scope.$evalAsync(() => {
    $scope.tip = 'Javascript Tip';
});

仓库佐证：从多语言版本与相邻技巧看 digest 体系

本技巧在 jstips 仓库中同时维护了多个语言版本，正文结构完全一致，可作为交叉校验与深入阅读的入口：

• 西班牙语版（关联文档原稿）
• 英文版
• 简体中文版
• 繁体中文版

从仓库结构看，这些技巧文件均遵循 POST_TEMPLATE.md 约定的 front matter 格式（layout、title、tip-number、tip-username、tip-tldr、categories 等），并按 _posts/<语言>/<分类>/<日期>-<标题>.md 的路径组织。本技巧编号为 01，在 README.md 的 tips 列表中排在 Angular 分类的首位，足以说明其作为"理解 AngularJS 数据绑定基础"的入门地位。

与此主题直接相关、值得顺带阅读的是第 62 期技巧 Preventing Unwanted Scopes Creation in AngularJs（另有繁体中文版）。该技巧展示了一个与 digest 体系紧密相连的经典问题：ng-repeat、ng-if 这类指令会创建新的子作用域，当子作用域通过 ng-model="data" 写入原始值时，会在子作用域上新建自己的字段，从而与父作用域"断链"：

<div ng-app>
  <input type="text" ng-model="data">
  <div ng-repeat="i in [1]">
    <input type="text" ng-model="data"><br/>
    innerScope: {{data}}
  </div>
  outerScope: {{data}}
</div>

解决方案是把数据放进对象属性（ng-model="data.text"），因为对象引用沿原型链共享，而原始值赋值会在子作用域上产生新字段——这正是理解 $digest 循环中 watcher 检查范围、以及 scope 层级关系对数据同步影响的关键补充。结合本期的 $digest 知识可以更好地理解：子作用域上的 watcher 与父作用域上的 watcher 在 digest 循环中处于不同的检查路径，作用域创建策略直接影响绑定的表现与排查难度。

总结：一张图记住选型逻辑

你的需求	推荐方法	理由
数据变更来自 AngularJS 之外的 DOM 事件/第三方回调	$apply(fn)	显式同步整个应用，函数参数提供错误处理
只需要刷新当前 scope 及其子 scope	$digest()	范围最小、开销最低，父作用域不受影响
使用 AngularJS 1.2.X 及以上，且希望合并循环	$evalAsync(fn)	在当前或下一轮循环内求值，减少循环次数
AngularJS 内部指令触发的变更	什么都不用做	框架已自动调度 digest 循环

最后再次强调原文档的核心告诫：digest 循环是 AngularJS 中最影响性能的阶段之一。手动触发时务必想清楚两件事——"数据从哪里来"（是否真的在 AngularJS 之外）与"影响范围有多大"（是整个应用还是局部子树），然后在 $apply、$digest、$evalAsync 之间做出正确选择。选对方法，你的 AngularJS 应用就能在保持双向绑定便利性的同时，把脏检查的开销控制在最小。