假設(shè)我們直接去給formData里某個(gè)對(duì)象或數(shù)組（feKeyValue）添加屬性，頁面是識(shí)別不到的并不能渲染頁面，這就需要響應(yīng)式

image.png

檢測(cè)變化的注意事項(xiàng)

受現(xiàn)代 JavaScript 的限制 (而且 Object.observe 也已經(jīng)被廢棄)，Vue 無法檢測(cè)到對(duì)象屬性的添加或刪除。由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化，所以屬性必須在 data 對(duì)象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。例如：

var vm = new Vue({
  data() {
    return {
      formData: {
      }
    }
  })
// `vm.formData` 是響應(yīng)式的

vm.b = 2
// `vm.b` 是非響應(yīng)式的

對(duì)于已經(jīng)創(chuàng)建的實(shí)例，Vue 不允許動(dòng)態(tài)添加根級(jí)別的響應(yīng)式屬性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套對(duì)象添加響應(yīng)式屬性。例如，對(duì)于：

this.$set(this.formData, 'fekeyvalue', [{key: '', value: '', comment: ''}]);
console.log(this.formData);

在console打印出formData

image.png

可以明顯看到$set后有了getter/setter
同理 點(diǎn)擊? 添加數(shù)組長(zhǎng)度也可直接相應(yīng)并頁面渲染

     */
    handleAddAttr(attr, array) {
      array.push({key: '', value: '' ,comment: ''})
    }