VUE2 中数组和对象，哪种情况下不是响应式

背景

昨天旁边同事在做一个功能，从接口获取数组数据，前端页面进行遍历展示。默认只展示每条数据上的部分字段，当点击该条数据旁边的展开按钮后，该条数据下边会展开一个面板展示该条数据的完整字段。

我给他出的主意是，在拿到接口数据的时候，可以先遍历一次接口数据，并且给每条数据中增加一个字段，用来控制该条数据是否展开。并且这个动作要在赋值给页面中遍历的那个对象之前完成。因为赋值之后再增加的属性，默认就不是响应式的啦。（PS: 通过官方提供的$set 方法倒是可以）

趁机复习一下这个知识点

对于数组

1. 直接通过索引修改数组，不是响应式的
2. 直接修改数组的长度，不是响应式的
3. 修改对象类型的数组中对象的属性，是响应式的（背景中介绍场景）
4. 通过 Vue.set() 方法可以添加响应式属性
5. 通过 Vue.set() 方法可以修改数组中的元素
6. 通过 Vue.set() 方法可以修改数组中的对象
7. 使用 push、pop、shift、unshift、splice 等方法修改数组，是响应式的，因为 VUE 重写了这些方法

对于对象

1. 直接添加属性，不是响应式的
2. 直接删除属性，不是响应式的
3. 通过 Vue.set() 方法可以添加响应式属性

其实

很多人以为 VUE2 中对数组和对象的监听有瑕疵，是因为 JS 中的 Object.defineProperty()方法无法监听到变化。其实不是这样的，真正的原因是设计者出于性能方面的考虑，舍弃了相应的监听。