【转载】Angular2双向绑定及变化检测

前几天总结了MVC、MVP、MVVM设计模式&＃xff0c;其中MVVM的核心机制就是双向绑定。React、Vue、Angular的双向绑定&＃xff0c;都是基于MVVM的设计模式。

什么是双向绑定

如图&＃xff1a;

双向绑定.jpg

双向绑定机制维护了页面&＃xff08;View&＃xff09;与数据&＃xff08;Data&＃xff09;的一致性。如今&＃xff0c;MVVM已经是前段流行框架必不可少的一部分。

Angular2中的双向绑定

双向绑定&＃xff0c;也是Angular2的核心概念之一&＃xff0c;Angular2的双向绑定是这样的&＃xff1a;

• data&＃61;>view&＃xff1a;数据绑定&＃xff0c;模板语法是 []
• view&＃61;>data&＃xff1a;事件绑定&＃xff0c;模板语法是 ()
• Angular其实并没有一个双向绑定的实现&＃xff0c;他的双向绑定就是数据绑定&＃43;事件绑定&＃xff0c;模板语法是 [()] 。

Angular2官方给的例子&＃xff1a;

上面是input空间的双向绑定语法&＃xff0c;很清楚的说明了双向绑定与两个单向绑定的关系。这里没有使用ngModule语法&＃xff0c;ngModule语法内部实现与这个差不多。

事件绑定

1. 用户操作出发DOM事件通知
2. Angular监听到了通知&＃xff0c;然后执行模板语法&＃xff0c;上面的例子就是将input控件的输入值赋给了currentHero.name。

数据绑定

由于js语言并没有属性变化通知的机制&＃xff0c;所以angular也不知道谁发生了变化&＃xff0c;在什么时候变了。Angular的变化机制是&＃xff1a;

image.png

上面的例子中input的数据绑定过程如下&＃xff1a;

1. 代码修改了currentHero.name的值。
2. 触发整个组件树的变化检查。
3. input显示了修改后的值。

数据何时变化

主要入下集中情况可能改变数据&＃xff1a;

• 用户输入操作&＃xff0c;比如点击&＃xff0c;提交等。
• 请求服务端数据。
• 定时事件&＃xff0c;比如setTimeout&＃xff0c;setInterval。

这几点有个共同点&＃xff0c;就是他们都是异步的。也就是说&＃xff0c;所有的异步操作是可能导致数据变化的根源因素。

如何通知变化

在Angularjs中是由代码$scope.$apply()或者$scope.$digest触发&＃xff0c;而Angular2接入了ZoneJS,由它监听了Angular所有的异步事件。ZoneJS重写了所有的异步API&＃xff08;所谓的猴子补丁&＃xff0c;MonkeyPath&＃xff09;。ZoneJS会通知Angular可能有数据发生变化&＃xff0c;需要检测更新。

变化检测原理 -- 脏检查

所谓脏检查就是存储所有变量的值&＃xff0c;每当可能有变量发生变化需要检查时&＃xff0c;就将所有变量的旧值跟新值进行比较&＃xff0c;不相等就说明检测到变化&＃xff0c;需要更新对应的视图。

AngularJS与Angular2变化检测的区别

Angularjs的变化检测机制也是脏检查&＃xff0c;而Angular2的变化检测性能比Angularjs提升了很多。

Angular2

Angular的核心是组件化&＃xff0c;组件的嵌套会使得最终形成一棵组件树。Angular的变化检测可以分组件进行&＃xff0c;每个组件都有对应的变化检测器ChangeDetector。可想而知&＃xff0c;这些变化检测器也会构成一棵树。

另外&＃xff0c;Angular的数据流是自顶而下的&＃xff0c;从父组件到子组件单向流动。单向数据流向保证了高效、可预测的变化检测&＃xff0c;尽管检查了负组件之后&＃xff0c;自组件可能会改变父组件的数据使得父组件需要再次被检查&＃xff0c;这是不被推荐的数据处理方式。在开发模式下&＃xff0c;Angular会进行二次检查&＃xff0c;如果出现上述情况&＃xff0c;二次检查就会报错&＃xff1a;ExpressionChangedAfterItHasBeenCheckedError&＃xff08;关于这个问题的答案&＃xff0c;可以在参考资料中找到&＃xff09;。而在生产环境中&＃xff0c;脏检查只会执行一次。

Angularjs

相比之下&＃xff0c;Angularjs采用的是双向数据流&＃xff0c;错综复杂的数据流使得他不得不多次检查&＃xff0c;使得数据最终趋向稳定。理论上&＃xff0c;数据永远不可能稳定&＃xff0c;Angularjs的策略是&＃xff0c;脏检查超过10次就认定程序有问题。

angular2-change-detection-moscowjs-31-9-638.jpg

变化检测优化

优化策略

有2个思路&＃xff1a;

1. OnPush策略&＃xff1a;我知道我没变&＃xff0c;别查我。
2. 手动控制刷新&＃xff1a;我变了&＃xff0c;只查我。

变化检测策略 OnPush

Angular还让开发者拥有制定变化策略的能力。

export enum ChangeDetectionStrategy { OnPush, // 表示变化检测对象的状态为&＃96;CheckOnce&＃96; Default, // 表示变化检测对象的状态为&＃96;CheckAlways&＃96;
}


从ChangeDetectionStrategy可以看到&＃xff0c;Angular有两种变化检测策略。Default是Angular默认的变化检测策略&＃xff0c;也就是脏检查&＃xff08;只要有值发生变化&＃xff0c;就全部检查&＃xff09;。开发者可以根据场景来设置更加高效的变化检测方式&＃xff1a;OnPush。OnPush策略&＃xff0c;就是只有当输入数据的引用发生变化或者有事件触发时&＃xff0c;组件进行变化检测。

&＃64;Component({template: &＃96;

{{vData.name}}

比如上面这个例子&＃xff0c;当vData的属性值发生变化的时候&＃xff0c;这个组件不会发生变化检测&＃xff0c;只有当vData重新赋值的时候才会。一般&＃xff0c;只接受输入的木偶子组件&＃xff08;dumb components&＃xff09;比较适合采用onPush策略。

那什么时候只要对象的属性值发生变化&＃xff0c;整个对象的引用就变了呢&＃xff1f;不可变对象&＃xff08;Immutable Object&＃xff09;。当组件中的输入对象是不变量时&＃xff0c;可采用onPush变化检测策略&＃xff0c;减少变化检测的频率。换个角度来说&＃xff0c;为了更加智能地执行变化检测&＃xff0c;可以在只接受输入的子组件中采用onPush策略。

手动控制变化检测

Angular不仅可以让开发者设置变化检测策略&＃xff0c;还可以让开发者获取变化检测对象引用ChangeDetectorRef&＃xff0c;手动去操作变化检测。变化检测对象引用给开发者提供的方法有以下几种&＃xff1a;

• markForCheck()&＃xff1a;将检查组件的所有父组件所有子组件&＃xff0c;即使设置了变化检测策略为onPush。
• detach()&＃xff1a;将变化检测对象脱离检测对象树&＃xff0c;不再进行变化检查&＃xff1b;结合detectChanges可实现局部变化检测。&＃xff08;采用onPush策略之后的组件detach()无效&＃xff09;
• detectChanges()&＃xff1a;将检测该组件及其子组件&＃xff0c;结合detach可实现局部检测。
• checkNoChanges(): 检测该组件及其子组件&＃xff0c;如果有变化存在则报错&＃xff0c;用于开发阶段二次验证变化已经完成。
• reattach()&＃xff1a;将脱离的变化检测对象重新链接到变化检测树上。

那么&＃xff0c;如果是Observable的话&＃xff0c;它会订阅所有的变量变化&＃xff0c;只要在订阅回调函数中手动触发变化检测即可实现最小成本的检测&＃xff08;仍采用onPush变化检测策略&＃xff09;。举个例子&＃xff1a;

&＃64;Component({template: &＃39;{{counter}}&＃39;,changeDetection: ChangeDetectionStrategy.OnPush
})
class CartBadgeCmp {&＃64;Input() addItemStream:Observable;counter &＃61; 0;constructor(private cd: ChangeDetectorRef) {}ngOnInit() {this.addItemStream.subscribe(() &＃61;> {this.counter&＃43;&＃43;; // 数据模型发生变化this.cd.markForCheck(); // 手动触发检测})}
}


另外&＃xff0c;当数据模型变化太过频繁&＃xff0c;我们可自定义变化检测的时机。举个例子&＃xff1a;

&＃64;Component({template: &＃96;{{counter}}&＃96;,
})
class CartBadgeCmp { counter &＃61; 0;detectEnabled &＃61; false;constructor(private cd: ChangeDetectorRef) {}ngOnInit() {// 每10毫秒增加1setInterval(()&＃61;>{this.counter&＃43;&＃43;}, 10);}toggle(){if( this.detectEnabled ){this.cd.reattach(); // 链接上变化检测树}else{this.cd.detach(); // 脱离变化检测树}}
}


总结

Angular与Angularjs都采用变化检测机制&＃xff0c;前者优于后者主要体现在&＃xff1a;

• 单项数据流动
• 以组件为单位维度独立进行检测
• 生产环境只进行一次检查
• 可自定义的变化检测策略&＃xff1a;Default和onPush
• 可自定义的变化检测操作&＃xff1a;markForcheck()、detectChanges()、detach()、reattach()、checkNoChanges()
• 代码实现上的优化&＃xff0c;据说采用了VM friendly的代码。

作者&＃xff1a;Husbin
链接&＃xff1a;https://www.jianshu.com/p/cee44e8831c9
來源&＃xff1a;简书
简书著作权归作者所有&＃xff0c;任何形式的转载都请联系作者获得授权并注明出处。