19_Vue如何监测到对象类型数据发生改变的?
数据更新
关于监视
- 我们之前讲过,我们在data当中配置的属性,最终会挂载在vue实例身上,而data这个配置项,最终也会在vue身上成为一个新的属性 == _data
- 当我们在页面DOM当中,去使用data当中的属性的时候,属性值发生变化,页面是不是会自动更新? 为什么会这样?
- 你可以理解为 Vue底层默认有一个监视器,负责监视这些属性的变化
- 与watch和computed不同,这个监视是全局的,watch与computed是针对单独的,或者一些属性
不过目前可以说一句,watch与vue底层监视,用的是一套类似的逻辑
检测数据的原理
这个概念是非常重要的,所以这节课是不能跳过的,否则有一天会为这个行为买单(谢谢,已经买过了)
我们先来做个需求吧,这个需求不演示不行
- 你写一段代码,这个代码你需要修改data当中的数据
- 修改数据的行为,不能被vue检测到,也就是卡bug。
- 请你实现这个功能
准备工作
这是我的html设计,ul 当中的li标签渲染data当中persons这个数组的数据
button按钮呢,设置了一个点击事件,这个点击事件用来单独修改 马冬梅这个对象的信息
测试结果
可以看到,在这种赋值的情况下,我们成功的对 马冬梅 进行了修改数据
并且在vue当中也能检测到
卡bug,引出问题
既然是 对马冬梅进行修改,我们换一种方式来对他进行修改
为什么这次数据修改不成功了,这是为什么?
总结
- 当我点击这个按钮的时候,在内存当中,persons[0]的数据确实发生改变了
- 但是,这次修改并没有被vue所检测到
- 至于控制台的数据到底修补修改,取决于你什么时候打开开发者工具
检测原理
vue是如何检测对象数据改变的
- 我们先回顾一下关于vue的数据监测,详细博文
- 我现在data这里有一个属性name和属性persons
- 打开控制台,在vue实例身上也有这俩属性
- 我们都知道,为什么这俩data当中属性会出现在vue实例身上,是因为做了数据代理
- 在vue身上有个_data,这个下划线data当中包含着我们上图配置的data的所有数据,并且还对这个配置项data做了加工
- 因为如果只是 将 data的值,赋给_data,那么二者的内容应该是相等的才是
- 但是现在显然不是,说明这里做了加工
- 为啥他要加工?
- 它加工了就可以做响应式了
关于definedproperty
- 之前说过,vue的数据代理与 definedProperty 这个API有关
- 那么其内部是如何进行数据代理的呢?
- 如果不使用 vue框架,我们能实现数据代理吗?
- 我们来测试一下
错误测试
- 按照正常的理解,如果我们需要对age这个属性进行数据代理
- 让页面能够检测到数据的改变,那么就需要使用这个接口(defined......)
- 那么这个接口的调用,需要如下几个配置
- 需要给谁添加属性
- 属性名是什么
- 配置项(getter和setter)
- 那么对getter而言,如果该属性被访问到了,那么就需要返回该属性的值
- 对setter而言,当属性值,发生修改,那么将接收到的修改的属性值,重新赋值给该属性
我们虽然添加的是age,但是这里的意思是将原有属性age覆盖掉,使用这个新的age
我们来看下测试结果
出现bug的原因
- 其实这个问题很好理解,我们看下错误原因
- 这是一个 无限递归产生的bug,该方法一直无限的被调用,从而产生了这个错误
- 为什么呢?
- 我们仔细看下这段代码
- 当,age属性被访问的时候,会调用get函数
- 调用get函数,会返回age
- 返回的过程当中,age是不是又被访问了
- 从而产生死循环,无限递归
- 为什么无法修改属性呢?也是这个道理
所以,vue底层的数据代理,或者说数据加工没有我们想的这么简单,那么人家是怎么实现的呢
Observer
- 在vue当中,有个接口叫做Observer,这个接口用来监视页面数据发生的变化
- 不过他底层是如何进行监听的呢
- 我们写不到底层那么详细,只写主要的部分
准备工作
1、首先我们准备一个data,这里面存放了两个属性,name和age
2、我们创建一个function ==> Observer
然后实例化这个 Observer,js当中,function是可以当做构造函数使用的
该函数需要一个属性,从参数名可以看出,这是一个对象属性
3、现在我们就来配置这个对象,首先我们需要获取到 data这个对象当中的所有key值
4、对这个数组,进行循环
5、在迭代的过程当中,使用definedProperty进行数据代理
参数解析,为什么这里,添加数据的对象(参数1) 是 this?
- 使用this,那么就是给 this所指向的对象 ==> Observer;也就是我们刚刚实例化出来的对象
- 给它添加属性(property参数)
- 那么接下来我们就在 参数三 当中配置get和set了
6、get和set
数组当中是可以用字符串来获取元素值的(很少)
完整代码
// 这有一个对象,对象有两个属性
let data = {
name: "waves",
age: 0
}
// 实例化一个监视器对象
let observer = new Observer(data);
// 监视对象Observer
function Observer(obj){
// 1、获取data当中的所有key值
let properties = Object.keys(data); // ["name","age"]
// 2、迭代 properties数组
properties.forEach((property)=>{
// 3、在迭代的过程当中,使用definedProperty进行数据代理
Object.defineProperty(this,property,{
// 配置get和set
get(){
// 很简单,因为data没有做数据代理,返回data[property]即可
return data[property]; // data["name"] = waves
},
set(val){
// 赋值即可
data[property] = val
}
})
})
}
总结
- 我们这里设置了一个data
- 通过我们的一系列配置,data身上有的属性,Observer实例身上也有
- 并且,这个observer身上的属性都做了数据代理
- 当然,vue写的比我们完善的多
- 比如,如果data当中还存在对象怎么办?
vue在这里写了递归,一直找,找到这个属性不再是对象为止
数组也是一个道理,vue也能给你找出来,不过 关于数组和对象的代理,这二者的处理方式不同,下节会讲解
19_Vue如何监测到对象类型数据发生改变的?的更多相关文章
- 20_Vue如何监测数组类型数据发生改变的?
通过上一节,我们知道了vue检测对象数据发生改变的原理 但是还有个api我们没有讲解,Vue.set(): 这个API比较适合在理解了对象检测的原理后进行讲解 案例准备 html <!-- 创建 ...
- iOS Foundation框架 -3.利用NSNumber和NSValue将非OC对象类型数据存放到集合
1.Foundation框架中提供了很多的集合类如:NSArray,NSMutableArray,NSSet,NSMutableSet,NSDictionary,NSMutableDictionary ...
- Java操作Redis存储对象类型数据
背景描述 关于JAVA去操作Redis时,如何存储一个对象的数据,大家是非常关心的问题,虽然官方提供了存储String,List,Set等等类型,但并不满足我们现在实际应用.存储一个对象是是 ...
- 将JSON字符串反序列化为指定的.NET对象类型
目录导航: 前言: 方法一.在项目中定义对应的对象参数模型,用于映射反序列化出来的参数(复杂JSON字符串数据推荐使用): 方法二.直接将JSON字符串格式数据反序列化转化为字典数据(简单JSON字符 ...
- 2016年11月3日JS脚本简介数据类型: 1.整型:int 2.小数类型: float(单精度) double(双精度) decimal () 3.字符类型: chr 4.字符串类型:sting 5.日期时间:datetime 6.布尔型数据:bool 7.对象类型:object 8.二进制:binary 语言类型: 1.强类型语言:c++ c c# java 2.弱类型语
数据类型: 1.整型:int 2.小数类型: float(单精度) double(双精度) decimal () 3.字符类型: chr 4.字符串类型:sting 5.日期时间:datetime 6 ...
- struts通过Ajax返回数据时,例如对象类型,没有执行Ajax的回调函数
<result type="json" name="success"> <param name=" ...
- oracle中使用impdp数据泵导入数据提示“ORA-31684:对象类型已经存在”错误的解决
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/47448751 本文出自[我是干勾鱼的博客] oracle中使用impdp数据泵导 ...
- js 对 只包含简单类型数据的对象 为元素 组成的数组 进行去重
/** * 对于由简单类型数据组成的对象为元素组成的数组进行去重操作 * @params {Array} 需要去重的对象数组 * @returns {Array} 去重后的对象数组 */ functi ...
- EF里Guid类型数据的自增长、时间戳和复杂类型的用法
通过前两章Lodging和Destination类的演示,大家肯定基本了解Code First是怎么玩的了,本章继续演示一些很实用的东西.文章的开头提示下:提供的demo为了后面演示效果,前面代码有些 ...
随机推荐
- 简单理解 Webpack,以及Web前端使用打包工具的原因
Java 中的模块 传统的前端开发就是 JS.HTML.CSS 三件套.Web 没有像 Java 一样拥有优秀的模块机制,就是类与类之间可以分装在不同的包下,不同包下的类互相引用时通过import导入 ...
- Star (欧拉函数)
题面 Fernando won a compass for his birthday, and now his favorite hobby is drawing stars: first, he ma ...
- 1.3_HTML基础知识
打开记事本,输入 <html> <hand> <title>我要自学网</title> </hand> <body> <h ...
- docker容器数据卷的使用
什么是容器数据卷 docker的理念回顾 将应用和运行的环境打包形成容器运行,运行可以伴随着容器,但是我们对于数据的要求,是希望能够持久化的! 就好比,你安装一个MySQL,结果你把容器删了,就相当于 ...
- GB/T 28181联网系统通信协议结构和技术实现
技术回顾 在本文开头,我们先一起回顾下GB/T28181联网系统通信协议结构: 联网系统在进行视音频传输及控制时应建立两个传输通道:会话通道和媒体流通道. 会话通道用于在设备之间建立会话并传输系统控制 ...
- 新增 Oracle 兼容函数-V8R6C4B0021
KingbaseES V8R6C4B0021新增加以下Oracle 兼容函数. 一.bin_to_num Oracle bin_to_num 函数用于将二进制位转换成十进制的数. 1.传入参数 tes ...
- aardio + .NET 快速开发独立 EXE 程序,可防 ILSpy 反编译
简介 aardio 可以非常方便地调用 .NET( 不需要任何复杂的步骤 ). .NET 在 aardio 中很好用,系统自带 .NET 组件以及各种开源 .NET 组件在 aardio 用户中也很受 ...
- 弱隔离级别 & 事务并发问题
介绍弱隔离级别 为什么要有弱隔离级别 如果两个事务操作的是不同的数据, 即不存在数据依赖关系, 则它们可以安全地并行执行.但是当出现某个事务修改数据而另一个事务同时要读取该数据, 或者两个事务同时修改 ...
- 【Shashlik.EventBus】.NET 事件总线,分布式事务最终一致性
[Shashlik.EventBus].NET 事件总线,分布式事务最终一致性 简介 github https://github.com/dotnet-shashlik/shashlik.eventb ...
- Linux命令之find、grep、echo、tar、whoami、uname
1. whoami--查看当前登录的用户名 book@100ask:~/linux$ whoami book 2. echo--打印命令,配合'>'或者'>>'使用 echo 打印信 ...