Angular双向数据绑定
程序员文章站
2023-12-23 21:10:27
双向数据绑定: 所谓双向数据绑定是指View(视图)与Model(模型)之间的绑定:View<=>Model。 View的改变: 通过界面交互使视图发生改变,如Input框的输入,Select元素的选择,scrollBar滚动,浏览器窗口大小改变等等。 Model的改变: 如在Ajax, promi ......
双向数据绑定: 所谓双向数据绑定是指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()),采用单向数据流,允许用户选择手动/自动检测模式...,提高了检测性能。
推荐阅读
-
Angular双向数据绑定
-
php怎样把数据库数据循环绑定到一个八行四列的表格里面去呢,知道的老师请说一下思路,谢谢
-
MySQL提供与Linux绑定的数据库下载_MySQL
-
通过Ajax方式绑定select选项数据的实例
-
解析Java的Jackson库中对象的序列化与数据泛型绑定
-
为什么无法使用php中mysqli的准备语句进行数据库中数据的查询(绑定参数或者绑定结果),项目急用!该如何处理
-
带你了解Angular10中的双向绑定
-
asp.net实现Gradview绑定数据库数据并导出Excel的方法
-
ASP.NET数据绑定之DataList控件
-
ASP.NET数据绑定之DataList控件实战篇