vuejs的响应式对象（object）失效及解决思路

== 该分析已失效，新版vue3中使用proxy重新定义属性，可以拦截全部的get请求，而非之前用Object.defineProperty()的时候存在对object对象属性变化的无响应。需要通过vue.set这一方法来手动设置属性的响应==

在vuejs中设定一个对象（object）为响应式的时候，如果不注意的话，会失效，记录一下解决思路和简单的原理。

原理

vuejs中其实无论是纯粹的对象还是数组或者其他数据类型都是可以设定为响应式的。

然而，受限于js本身的限制，vue无法检测对象属性的增加和删减，所以vue会迭代对象中的每一条属性，然后为添加getter和setter响应式属性，使其成为响应式。不过更难受的是js中直接生成的object是不存粹的，即哪怕是一个空的object 类似这样：{}，都会携带许多自有属性。这也使得我们在将一个对象直接赋予响应式data时，是无效操作，哪怕利用 a = vue.set( object)时，获得的a仍然不是响应式的。

判断

从原来也可以看出，判断一个值是否是响应式的，有一个很简单的方法：console.log(该值)，

点开控制台中的object对象，可以很明显看到他又对应属性的getter和setter，
如果没有，证明这个对象的这条属性不是响应式的，如果这个属性（key，键）对应的值（value）发生变化的话，那么相应页面上调用这个值的地方是不会响应变化的。

解决

解决办法：
1、 官方文档里说是，可以将object对象变为一个纯粹的object对象，即只有键和值，没有其他一些相关属性__proto__（）,然后使用set赋值，或是直接赋值给响应式对象

2、无脑方法====> 迭代object中的每一个键值对，然后利用vue.set添加响应式属性，迭代的时候，不会添加__proto__中的属性为响应式。

先记着，有空加案例说明。