浅谈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 相关文章推荐
javascript之dhDataGrid Ver2.0.0代码
Jul 01 Javascript
jQuery入门知识简介
Mar 04 Javascript
基于jquery实现控制经纬度显示地图与卫星
May 20 Javascript
js文件缓存之版本管理详解
Jul 05 Javascript
jQuery常用操作方法及常用函数总结
Jun 19 Javascript
jQuery中unwrap()方法用法实例
Jan 16 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
Jan 21 Javascript
js面试题之异步问题的深入理解
Sep 20 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
2006/12/14 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
WordPress JQuery处理沙发头像
2009/06/22 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
Jquery的each里用return true或false代替break或continue
2014/05/21 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
简介JavaScript中的sub()方法的使用
2015/06/08 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
js通过keyCode值判断单击键盘上某个键,然后触发指定的事件方法
2017/02/19 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
2017/05/20 Javascript
js实现随机点名系统(实例讲解)
2017/10/18 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
2017/12/08 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
nodejs通过钉钉群机器人推送消息的实现代码
2019/05/05 NodeJs
vue商城中商品“筛选器”功能的实现代码
2020/07/01 Javascript
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
Python 登录网站详解及实例
2017/04/11 Python
Python正则表达式分组概念与用法详解
2017/06/24 Python
Python 循环语句之 while,for语句详解
2018/04/23 Python
在python win系统下 打开TXT文件的实例
2018/04/29 Python
Django框架登录加上验证码校验实现验证功能示例
2019/05/23 Python
Python hexstring-list-str之间的转换方法
2019/06/12 Python
Python 日期区间处理 (本周本月上周上月...)
2019/08/08 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
鼓励运动员的广播稿
2014/02/08 职场文书
护士实习自荐信
2015/03/06 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python
阿里云国际版 使用Nginx作为HTTPS转发代理服务器
2022/05/11 Servers