浅谈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 相关文章推荐
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
JS解析XML文件和XML字符串详解
Apr 17 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
js前端实现图片懒加载(lazyload)的两种方式
Apr 24 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
微信小程序使用wxParse解析html的方法示例
Jan 17 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
node.js express框架实现文件上传与下载功能实例详解
Oct 15 Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 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
mysql 搜索之简单应用
2007/04/27 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
php简单socket服务器客户端代码实例
2015/05/18 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
php魔术方法功能与用法实例分析
2016/10/19 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
php将html转为图片的实现方法
2017/05/19 PHP
解决Laravel 不能创建 migration 的问题
2019/10/09 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
js浏览器html5表单验证
2016/10/17 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
详解通过源码解析Node.js中cluster模块的主要功能实现
2018/05/16 Javascript
微信小程序模拟cookie的实现
2018/06/20 Javascript
详解JS判断页面是在手机端还是在PC端打开的方法
2019/04/26 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
Python logging模块学习笔记
2014/05/24 Python
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
python实现任意位置文件分割的实例
2018/12/14 Python
基于python实现KNN分类算法
2020/04/23 Python
对python dataframe逻辑取值的方法详解
2019/01/30 Python
Python3使用Matplotlib 绘制精美的数学函数图形
2019/04/11 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
tensorflow 分类损失函数使用小记
2020/02/18 Python
基于Python爬取素材网站音频文件
2020/10/21 Python
函授大专自我鉴定
2013/11/01 职场文书
药学职务聘任书
2014/03/29 职场文书
个人授权委托书
2014/04/03 职场文书
公开承诺书格式
2014/05/21 职场文书
幼儿园辞职信
2015/05/13 职场文书
Python源码解析之List
2021/05/21 Python