美文网首页我爱编程
angular双向绑定原理

angular双向绑定原理

作者: 星月西 | 来源:发表于2017-03-19 12:36 被阅读385次

1.脏检查循环触发时机

angular并不存在定时脏检查
angular对常用的dom事件,xhq事件作了封装,如果调用这些封装,就会在里面触发进入angular的digest流程,主要有以下情况:

  • DOM事件,如用户输入文本,点击按钮等,(ng-click)
  • XHQ响应事件($http)
  • 浏览器Location变更事件,即Url中hash部分变更($location)
  • Timer事件($Timeout,$interval)
  • 手动调用$apply或$digest

2.scope作用域对象

  • 在作用域上添加数据本身不会有性能折扣,angular的脏检查循环遍历的是监听器列表,而不是作用域的属性
  • digest会调用每一个监控函数,最好关心监听器的数量和监控函数的性能

3.$digest脏检查循环

  • 脏检查循环检查出监控数据有变化时会再次运行,直到监控数据没有发生变化为止
  • 如果一个监听函数改变另一个监控变量,而另一个监听函数反过来改变这个监控变量,则会造成无限循环,需要给脏检查循环设置一个次数上限
  • angular默认不使用基于值的脏检查,因为检查值需要遍历嵌套的数据结构,深拷贝的数据也很占用内存

相关文章

  • angular双向绑定原理

    1.脏检查循环触发时机 angular并不存在定时脏检查。angular对常用的dom事件,xhq事件作了封装,如...

  • Angular.js问题总结

    1.angular 的数据绑定采用什么机制?详述原理 脏检查机制。 双向数据绑定是 AngularJS 的核心机制...

  • vue\angular\react区别

    一、关于数据绑定 Angular使用双向绑定即:界面的操作能实时反映到数据,数据的变更能实时展现到界面。 原理:$...

  • Angular学习第一天

    Angular学习第一天 第一天学习目标 如何创建angular新工程 什么是单向绑定 什么是双向绑定 双向绑定需...

  • Angular5踩坑总结

    表单双向绑定1:做双向绑定时,如果遇见Angular: Can't bind to 'ngModel' since...

  • angular双向绑定

    MVVM的核心机制就是双向绑定。React、Vue、Angular的双向绑定,都是基于MVVM的设计模式。 双向绑...

  • 深入Vue响应式原理

    1.Vue的双向数据绑定 参考 vue的双向绑定原理及实现Vue双向绑定的实现原理Object.definepro...

  • Angular 2入门(二)

    (纯属个人笔记,摘要记录) 双向绑定 [(ngModel)]是Angular的双向数据绑定的语法。 用法如下: 因...

  • 双向绑定和单向绑定

    Vue 的双向绑定(也是 Angular 的双向绑定)有这些功能: 只要 JS 改变了 view.number 或...

  • Angular学习笔记-双向绑定

    Angular和Vue一样都是MVVM的框架,MVVM的核心机制就是双向绑定。 双向绑定将属性绑定与事件绑定结合在...

网友评论

    本文标题:angular双向绑定原理

    本文链接:https://www.haomeiwen.com/subject/fvsmnttx.html