美文网首页
6.变更检测机制和DoCheck钩子

6.变更检测机制和DoCheck钩子

作者: Monee121 | 来源:发表于2018-02-27 13:10 被阅读0次

(1)目的:保证组件属性变化和浏览器的显示同步,浏览器里面发生任何异步变化都会触发“变更检测”,当变更检测运行时,会检测应用中所有的绑定关系。(在1中必须用ngclick,想用原生的,必须用apply,在2中有了zone.js,随便用。变更检测只是把属性和页面模板同步,不会改变属性值。每个组件会生成它自己的变更检测器,当检查到变化,zone会根据组件变更检查策略来检查策略,来更新模板)

(2)检测策略:

      A:Default策略:检查所有组件

      B.Onpush策略:阻止检查继续走下去

(3)DoCheck钩子的调用

演示:

1.子组件

效果:

解析:点,点,点点击事件会触发变更检测机制,DoCheck会调用,改了tom值,变化捕捉到,点,点,计数器清空。钩子会检测什么时候会发生变化,小心钩子频繁调用,发生变化,都会被调用,大部分调用无关,很显然用这个钩子要非常高效,要不然会引起性能问题,有check关键字的钩子,变更检测发生,所有写check关键字钩子都会被调用。所有写有check关键字的钩子用的时候要非常高效。

相关文章

  • 6.变更检测机制和DoCheck钩子

    (1)目的:保证组件属性变化和浏览器的显示同步,浏览器里面发生任何异步变化都会触发“变更检测”,当变更检测运行时,...

  • OnChanges钩子,angular的变更检测机制和DoChe

    OnChanges钩子 可变对象和不可变对象的区别 不可变对象给greeting赋值时改变的是它指向的内存的地址 ...

  • Angular中的变更检测

    1.什么是变更检测? 变更检测就是Angular检测视图与数据模型之间绑定的值是否发生了改变,当检测到模型中绑定的...

  • 钩子的应用和生命周期的实现

    钩子(hook) 钩子的概念源于Windows的消息处理机制,通过设置钩子,应用程序可以对所有的消息事件进行拦截,...

  • Angular变更检测

    angular变更检测是zone.js代理 all browser events (click, mouseove...

  • JS中的hook机制

    hook机制也就是钩子机制,由表驱动实现,常用来处理多种特殊情况的处理。我们预定义了一些钩子,在常用的代码逻辑中去...

  • Android 权限控制机制

    1.应用权限机制 2.Android版本权限变更 3.应用权限变更适配实例 4.默认授权 5.AppOps机制 6...

  • 事件钩子与指令标记

    事件钩子 对于事件钩子,我不成熟的理解是在Vue中封装的事件响应机制。 在Vue中,有11个事件钩子,分别对应着V...

  • Angular-详细说说angular变更检测

    两年前在学习Angular的时候写过一篇关于变更检测的文章Angular-变更检测,但总结的比较简单,前面参加ng...

  • Angular ChangeDetection变更检测

    最近在做项目的过程中遇到一个问题:在回调函数里,数据发生变化时,视图并没有相应地更新。于是就在网上搜索解决方案,说...

网友评论

      本文标题:6.变更检测机制和DoCheck钩子

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