假设我们直接去给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: ''})
    }