双向数据绑定： 所谓双向数据绑定是指view(视图)与model(模型)之间的绑定：view<=>model。
view => model：
在浏览器界面中，几乎所有的交互行为我们都可以通过监听其对应事件的方式去捕获，如onchange, onresize, onscroll...因此view => model非常简单，两个字:事件。
angular中对事件监听进行了封装(如oninput=>(input))，举个栗子:
我要评论<h1>title is: {{title}}</h1>
<input type="text" (input)="valuechanged($event)">
component中：
export class appcomponent {
title = '';
constructor(){
}
valuechanged(e){
this.title = e.target.value;
}
}
通过监听input事件，对title进行重新赋值，完成view=>model过程。
model=>view:
上述demo中，title的值被实时更新到了h1标签中，这又是如何做到的呢？
浏览器并不能主动感知到什么时候需要更新视图，需要angular在合适的时刻告知它：“老兄，我组件里有一个数据的值变了，你帮忙更新一下视图呗。”
问题的核心在于及时告知， 在angularjs中使用的是$digest循环进行脏值检测，通过检测scope下model的值是否有变动来判断是否需要更新视图。
angular中也是相似的原理，上述例子中，当valuechanged方法完成后，
angular立即进行了一遍脏值检测，发现title的值相较之前发生改变了！于是便跑去找浏览器请求更新视图，h1标签中的内容就被更新啦。
然而angular对于脏值检测相较于angularjs做了很大的改进，引入了zone.js进行异步管理（不再需要手动执行$apply()），采用单向数据流，允许用户选择手动/自动检测模式...，提高了检测性能。
如对本文有疑问， 点击进行留言回复！！
egg项目npm/cnpm出错Connect timeout
网友评论