浅谈Angular 的变化检测的方法


Posted in Javascript onMarch 01, 2018

Change Detection (变化检测) 是 Angular 2 中最重要的一个特性。当组件中的数据发生变化的时候,Angular 2 能检测到数据变化并自动刷新视图反映出相应的变化。

在介绍变化检测之前,我们要先介绍一下浏览器中渲染的概念,渲染是将模型映射到视图的过程。模型的值可以是 JavaScript 中的原始数据类型、对象、数组或其他数据对象。然而视图可以是页面中的段落、表单、按钮等其他元素,这些页面元素内部使用 DOM(Document Object Model) 来表示,为了更好地理解,我们来看一个具体的示例:

<h4 id="greeting"></h4> <script> document.getElementById("greeting").innerHTML = "Hello World!"; </script>

这个例子很简单,因为模型不会变化,所以页面只会渲染一次。如果数据模型在运行时会不断变化,那么整个过程将变得复杂。因此为了保证数据与视图的同步,页面将会进行多次渲染。接下来我们来考虑一下以下几个问题:

1、什么时候模型会发生变化

2、模型产生了什么变化

3、变化后需要更新的视图区域在哪里

4、怎么更新对应视图区域

而变化检测的基本目的就是解决上述问题。在 Angular 2 中当组件内的模型发生变化的时候,组件内的变化检测器就会检测到更新,然后通知视图刷新。因此变化检测器有两个主要的任务:

1、检测模型的变化

2、通知视图刷新

接下来我们来分析一下什么是变化,变化是怎么产生的。

变化和事件

变化是旧模型与新模型之间的区别,换句话说变化产生了一个新的模型。让我们来看一下下面的代码:

import { Component } from '@angular/core'; @Component({
 selector: 'exe-counter',
 template: `
 <p>当前值:{{ counter }}</p>
 <button (click)="countUp()"> + </button>` }) export class CounterComponent {
 counter = 0;

 countUp() { this.counter++;
 }
}

页面首次渲染完后,计数器的当前值为0。当我们点击 + 按钮时,计数器的 counter 值将会自动加1,之后页面中当前值也会被更新。在这个例子中,点击事件引起了 counter 属性值的变化。

我们继续看下一个例子:

import { Component, OnInit } from '@angular/core'; @Component({
 selector: 'exe-counter',
 template: `
  <p>当前值:{{ counter }}</p>
 ` }) export class CounterComponent implements OnInit {
 counter = 0;
 ngOnInit() {
  setInterval(() => { this.counter++;
  }, 1000);
 }
}

该组件通过 setInterval 定时器,实现每秒钟 counter 值自动加1。在这种情况下,它是定时器事件引起了属性值的变化。最后我们再来看个例子:

import { Component, OnInit } from '@angular/core'; import { Http } from '@angular/http'; @Component({
 selector: 'exe-counter',
 template: `
  <p>当前值:{{ counter }}</p>
 ` }) export class CounterComponent implements OnInit {
 counter = 0; constructor(private http: Http) {}
 ngOnInit() { this.http.get('/counter-data.json')
    .map(res => res.json())
    .subscribe(data => { this.counter = data.value;
    });
 }
}

该组件在进行初始化的时候,会发送一个 HTTP 请求去获取初始值。当请求成功返回的时候,组件的 counter 属性的值会被更新。在这种情况下,它是由 XHR 回调引起了属性值的变化。

现在我们来总结一下,引起模型变化的三类事件源:

1、Events:click, mouseover, keyup ...

2、Timers:setInterval、setTimeout

3、XHRs:Ajax(GET、POST ...)

这些事件源有一个共同的特性,即它们都是异步操作。那我们可以这样认为,所有的异步操作都有可能会引起模型的变化。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
点击下载链接 弹出页面实现代码
Oct 01 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
浅析JavaScript中break、continue和return的区别
Nov 30 Javascript
AngularJS表单验证功能
Oct 19 Javascript
在node环境下parse Smarty模板的使用示例代码
Nov 15 Javascript
javascript实现弹出层效果
Dec 10 Javascript
vue 使用async写数字动态加载效果案例
Jul 18 Javascript
微信小程序实现翻牌抽奖动画
Sep 21 Javascript
JS实现超级好看的鼠标小尾巴特效
Dec 01 Javascript
ES6学习笔记之map、set与数组、对象的对比
Mar 01 #Javascript
Node.js静态服务器的实现方法
Feb 28 #Javascript
JS脚本加载后执行相应回调函数的操作方法
Feb 28 #Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 #Javascript
webpack项目调试以及独立打包配置文件的方法
Feb 28 #Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 #Javascript
vue 组件 全局注册和局部注册的实现
Feb 28 #Javascript
You might like
一个PHP+MSSQL分页的例子
2006/10/09 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
如何在HTML 中嵌入 PHP 代码
2015/05/13 PHP
php设计模式之状态模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Js+XML 操作
2006/09/20 Javascript
js 代码集(学习js的朋友可以看下)
2009/07/22 Javascript
JavaScript this调用规则说明
2010/03/08 Javascript
javascript JSON操作入门实例
2010/04/16 Javascript
firefox火狐浏览器与与ie兼容的2个问题总结
2010/07/20 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
html5+javascript制作简易画板附图
2014/04/25 Javascript
JavaScript数组和循环详解
2015/04/27 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
新手快速入门微信小程序组件库 iView Weapp
2019/06/24 Javascript
微信小程序如何获取用户头像和昵称
2019/09/23 Javascript
Python命令行参数解析模块getopt使用实例
2015/04/13 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
python 利用toapi库自动生成api
2020/10/19 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
eDreams澳大利亚:预订机票、酒店和度假产品
2017/04/19 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
SQL Server面试题
2016/10/17 面试题
书香校园活动方案
2014/02/28 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
个人工作违纪检讨书
2015/05/05 职场文书
分享Python异步爬取知乎热榜
2022/04/12 Python