在開發有時會遇到一個問題，明明寫的沒問題，為啥資料就不響應呢處？

<template>
  <div>
    <div>
      <span>使用者名稱: {{ userInfo.name }}</span>
      <span>使用者性別: {{ userInfo.sex }}</span>
      <span v-if="userInfo.officialAccount">
        公眾號: {{ userInfo.officialAccount }}
      </span
 
>
    </div>
    <button @click="handleAddOfficialAccount">新增公眾號</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      userInfo: {
        name: '子君',
        sex: '男'
      }
    }
  },
  methods: {
    // 在這裡新增使用者的公眾號
    handleAddOfficialAccount() {
      
 
this.userInfo.officialAccount = '前端有的玩'
    }
  }
}
</script>

在上面的程式碼中，我們希望給使用者資訊裡面新增公眾號屬性，但是通過this.userInfo.officialAccount = '前端有的玩' 新增之後，並沒有生效，這是為什麼呢？

這是因為在Vue內部，資料響應是通過使用Object.definePrototype監聽物件的每一個鍵的getter,setter方法來實現的，但通過這種方法只能監聽到已有屬性，新增的屬性是無法監聽到的。

將本來要新增的屬性提前在data中定義好

比如上面的公眾號，我可以提前在userInfo

data() {
    return {
      userInfo: {
        name: '子君',
        sex: '男',
        // 我先提前定義好
        officialAccount: ''
      }
    }
  }