什么是变更检测?聊聊angular的变更机制
时间:2022-05-30 [网络编程]作者:fabuyuan 浏览:6 次
一、什么是变更检测
- 概括: 一种更改
检测机制
,用于遍历组件树,检查每个组件的变化,并在组件属性发生变化的时候触发DOM
的更新。【相关教程推荐:《angular教程》】 - 变更检测的基本任务: 获得程序的内部
状态
并使之在用户界面可见
。这个状态可以是任何的对象、数组、基本数据类型。
二、什么引起了变更
事件驱动,来源有以下三大类:
- 事件:页面 click、submit、mouse down……
- XHR:从后端服务器拿到数据
- Timers:setTimeout()、setInterval()
这几点有一个共同点,就是它们都是异步的,也就是说,所有的异步操作
是可能导致数据变化的根源因素,所以每当执行一些异步操作时,我们的应用程序状态可能发生改变,而这时则需要去更新视图
三、状态变化怎么通知变更检测
在Angular
当中则接入了NgZone
,由它来监听Angular所有的异步事件
,Angular 在启动时会重写(通过 Zone.js
)部分底层浏览器 API(暴力的拦截了所有的异步事件)。
常见的有两种方式来触发变化检测,一种方法是基于组件的生命周期钩子
ngAfterViewChecked() { console.log('cluster-master.component cd'); }
另一种方法是手动控制变化检测的打开或者关闭,并手动触发
constructor(private cd: ChangeDetectorRef) { cd.detach() setInterval(() => { this.cd.detectChanges() }, 5000) }
三、Angular 变更检测
Angular 的核心是组件化,组件的嵌套会使得最终形成一棵组件树
,Angular 的变化检测可以分组件进行,每个组件都有对应的变化检测器 ChangeDetector
,可想而知这些变化检测器也会构成一棵树。
在 Angular 中每个组件都有自己的变化检测器,这使得我们可以对每个组件分别控制如何以及何时进行变更检测。
四、变更检测策略
Angular还让开发者拥有定制变化检测策略的能力。
- default:
每次
变更检测都会引起组件的变更检测,包括其他组件
的状态变化,以及本组件
引用型变量内部属性值变化 - Onpush: 每次变更检测会跳过本组件的变更检查,除非
满足一些条件
4.1 default
Angular 默认的变化检测机制是 ChangeDetectionStrategy.Default
,每次异步事件 callback 结束后,NgZone会触发整个组件树
至上而下
做变化检测
4.2 onPush
OnPush 策略,用以跳过
某个 component 以及它下面所有子组件
的变化检测
其实在设置了 OnPush
策略以后,还是有许多方法可以触发变更检测的;
- 1)组件的
@Input
属性的引用
发生变化。 - 2)组件内的
DOM
事件,包括它子组件的 DOM 事件,比如click、submit、mouse down
。 - 3)组件内的
Observable
订阅事件,同时设置Async pipe
。 - 4)组件内手动使用
ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick()
方法
五、变化检测对象引用
- markForCheck():使用于
子组件
,将该子组件到根组件
之间的路径标记起来,通知 angular 检测器下次变化检测时一定
检查此路径上的组件,即使设置了变化检测策略为onPush
- detectChanges():手动发起
该组件到各个子组件
的变更检测 - detach():将组件的检测器从检测器数中
脱离
,不再受检测机制的控制,除非重新 attach 上 - reattach():把脱离的检测器
重新链接
到检测器树上
更多编程相关知识,请访问:编程视频!!
以上就是什么是变更检测?聊聊angular的变更机制的详细内容,更多请关注站长家园其它相关文章!
本文标签: Angular.jsAngular
转载请注明来源:什么是变更检测?聊聊angular的变更机制
本文永久链接地址:https://www.adminjie.com/post/12954.html
免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!
版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。
更多精彩内容
- VUE中V-IF条件判断改变元素的样式操作
- Discuz如何解决安装时报错run_sql_error
- 低版本VS项目在VS2019无法正常编译的问题
- PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
- Oracle数据库的实例/表空间/用户/表之间关系简单讲解
- RSA2是啥?PHP-RSA2签名验证怎么实现?
- app是什么应用程序的简称
- 华为dubal20是什么型号
- 小程序大小超限除了分包还能怎么做?如何避免和解决大小限制?
- 电脑显示信号线无连接是什么意思
- html5中onclick是什么意思
- ana an00华为是什么型号
- 超清视效是什么意思
- html中value是什么意思
- vivov1818a是什么手机型号

- 最新文章
-
-
thinkphp的mvc分别指什么
thinkphp基于的mvc分别是指:1、m是model的缩写,表示模型,用于数据处理;2、v是view的缩写,表示视图,由View类和模板文件组成;3、c是c...
-
thinkphp默认用的哪个模板引擎
thinkphp默认使用的是内置模板引擎,是一个自主创新的XML编译性模板引擎;内置模板引擎支持模板文件中采用php原生态代码和模板标签的混合使用,视图的模板文...
-
svn与vss的区别是什么
区别:1、vss是微软开发的,是收费的,而svn是开源免费的;2、vss必须有客户端,而svn可以用客户端,也可以用命令行模式,还可以用网页方式只读访问;3、v...
-
thinkphp是免费的吗
thinkphp是免费的;thinkphp是一个免费开源的、快速的、简单的、面向对象的轻量级PHP开发框架,遵循Apache2开源协议发布,是为了敏捷web应用...
-
Excel中COUNTIF函数的用法总结
本篇文章给大家带来了关于excel的相关知识,其中主要介绍了关于COUNTIF函数的相关问题,包括了怎么输入不一样的序号、怎么计算不重复的人数等等内容,下面一起...
-
- 热门文章
-
-
VUE中V-IF条件判断改变元素的样式操作
这篇文章主要介绍了VUE中V-IF条件判断改变元素的样式操作,具有很好的参考价值,希望对大家有所帮助。一起跟随想过来看看吧...
-
Discuz如何解决安装时报错run_sql_error
问题环境VMware虚拟机Centos7.3PHP7.0MySQL8.0NGINX1.14Discuz3.4问题还原本地环境为PHP5.6+MySQL5.6在安...
-
低版本VS项目在VS2019无法正常编译的问题
低版本VS项目在VS2019无法正常编译的问题这里指的编译并不准确,只是为了方便说明。后有(未安装),201?...
-
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
实现原理使用redis链表来做,因为pop操作是原子的,即使有很多用户同时到达,也是依次执行,推荐使用。实现步骤第一步,先将商品库存入队列/**.trigge...
-
Oracle数据库的实例/表空间/用户/表之间关系简单讲解
完整的Oracle数据库通常由两部分组成:Oracle数据库和数据库实例。Oracle是一种数据库管理系统,是一种关系型的数据库管理系统。我们用这些高级权限账号...
-