19_Vue如何监测到对象类型数据发生改变的？( 二 ) _生活百科

文章插图
我们虽然添加的是age，但是这里的意思是将原有属性age覆盖掉，使用这个新的age
我们来看下测试结果

文章插图
出现bug的原因

其实这个问题很好理解，我们看下错误原因
- 文章插图
这是一个无限递归产生的bug ，该方法一直无限的被调用，从而产生了这个错误
为什么呢？
我们仔细看下这段代码
1. 文章插图
2. 当，age属性被访问的时候，会调用get函数
3. 调用get函数，会返回age
4. 返回的过程当中，age是不是又被访问了
5. 从而产生死循环，无限递归
为什么无法修改属性呢？也是这个道理

所以，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 = https://www.huyubaike.com/biancheng/{name:"waves",age: 0}// 实例化一个监视器对象let observer = new Observer(data);// 监视对象Observerfunction Observer(obj){// 1、获取data当中的所有key值let properties = Object.keys(data); // ["name","age"]// 2、迭代 properties数组properties.forEach((property)=>{// 3、在迭代的过程当中，使用definedProperty进行数据代理Object.defineProperty(this,property,{// 配置get和setget(){// 很简单，因为data没有做数据代理，返回data[property]即可return data[property]; // data["name"] = waves},set(val){// 赋值即可data[property] = val}})})}

总结