Angular双向数据绑定

双向数据绑定： 所谓双向数据绑定是指View(视图)与Model(模型)之间的绑定：View<=>Model。

• View的改变： 通过界面交互使视图发生改变，如Input框的输入，Select元素的选择，scrollBar滚动，浏览器窗口大小改变等等。
• Model的改变:  如在Ajax, promise, timeout等回调中对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()），采用单向数据流，允许用户选择手动/自动检测模式...，提高了检测性能。

原文链接:https://www.cnblogs.com/freddysia/p/10759486.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有