浅谈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 相关文章推荐
jquery禁用右键单击功能屏蔽F5刷新
Mar 17 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
Vue监听页面刷新和关闭功能
Jun 20 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
Oct 16 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脚本[带参数]的方法
2010/01/22 PHP
php加密解密实用类分享
2014/01/07 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
ThinkPHP框架中使用Memcached缓存数据的方法
2018/03/31 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
PHP5.5基于mysqli连接MySQL数据库和读取数据操作实例详解
2019/02/16 PHP
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
一篇文章带你搞懂Vue虚拟Dom与diff算法
2020/08/25 Javascript
[05:02]2014DOTA2 TI中国区预选赛精彩TOPPLAY第三弹
2014/06/25 DOTA
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
浅谈Pycharm调用同级目录下的py脚本bug
2018/12/03 Python
python解析xml简单示例
2019/06/21 Python
Python学习笔记之Break和Continue用法分析
2019/08/14 Python
python中matplotlib条件背景颜色的实现
2019/09/02 Python
Python键鼠操作自动化库PyAutoGUI简介(小结)
2020/05/17 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
CSS3 filter(滤镜)实现网页灰色或者黑色模式的示例代码
2021/02/24 HTML / CSS
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
函授本科自我鉴定
2013/11/03 职场文书
汽修专业学生自我鉴定
2013/11/16 职场文书
英语专业推荐信
2013/11/16 职场文书
档案检查欢迎词
2014/01/13 职场文书
幼儿园家长寄语
2014/04/02 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
食品安全宣传标语
2014/06/07 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
2015年公司保安年终工作总结
2015/05/14 职场文书
暖春观后感
2015/06/08 职场文书
Python基础之数据类型知识汇总
2021/05/18 Python
详解pytorch创建tensor函数
2022/03/22 Python
vue elementUI批量上传文件
2022/04/26 Vue.js