vue中data值改變但頁面視圖不刷新問題

問題的說明與解決

說明

• 問題就在於vue頁面視圖的不更新
• 在這里要注意一點，根據官方描述所得：當vue的data里面聲明或者已經賦值過的對象或數組（包含對象值），向對象里面添加新的屬性和更新這個新屬性的值，頁面視圖是不會更新的。

解決

• 要想更新數據的時候視圖也更新，可以使用 $set 或者 Object.assign 來解決
  添加新屬性的時候，使用下面的方法

export default {
      data() {
            return {
                  obj: {
                        a: 1,
                        b: 2
                  }
            }
      }
}
// 給obj添加新屬性
// 1
this.$set(this.obj1, 'c', 3)
// 2
Object.assign({}, this.obj, { c: 3 })

• 此處簡單做個介紹，欲了解更多請移步下方官方文檔⇣⇣⇣，點擊下方鏈接即可

官方深入響應式原理