假设我们直接去给formData里某个对象或数组（feKeyValue）添加属性，页面是识别不到的并不能渲染页面，这就需要响应式
image.png
检测变化的注意事项
受现代 JavaScript 的限制 (而且 Object.observe 也已经被废弃)，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如：
var vm = new Vue({
data() {
return {
formData: {
}
}
})
// `vm.formData` 是响应式的
vm.b = 2
// `vm.b` 是非响应式的
对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如，对于：
this.$set(this.formData, 'fekeyvalue', [{key: '', value: '', comment: ''}]);
console.log(this.formData);
在console打印出formData
image.png
可以明显看到$set后有了getter/setter
同理 点击➕ 添加数组长度也可直接相应并页面渲染
*/
handleAddAttr(attr, array) {
array.push({key: '', value: '' ,comment: ''})
}
