① vue數據改變頁面不刷新

如果在實例創建之后添加新的屬性到實例上，它不會觸發視圖更新。

<div id="app">
  {{score}}
  <div @click="changeScore">{{namelist}}</div>
</div>

data: {
    return {
        score:{
            chinese:100,
            english:20,
            math:149
        },
        namelist:['laoxie','dingding','luoluo']
    }    
},
methods: {
　　changeScore() { 
　　　　this.score.chinese = 150;//不更新視圖
　　}
}

• 因為 Vue 無法探測實例屬性上新增的 property，故頁面不更新視圖。

Vue官方文檔提供了兩種方法：Vue.set(target,key,val) 和 this.$set(target,key,val)

• 區別：Vue.set() 可以設置實例創建之后添加的屬性，而this.$set() 只能設置實例創建后存在的屬性

data: {
    return {
        score:{
            chinese:100,
            english:20,
            math:149
        },
        namelist:['laoxie','dingding','luoluo']
    }    
},
methods: {
　　changeScore() { 
　　　　// this.score.chinese = 150;//不更新視圖
      // this.$set(this.score,chinese,150)
      Vue.set(this.score,chinese,150)
　　}
}

• target對象不能是vue實例，或者Vue實例的根數據對象

Vue.set(this.score,'wuli',123)
Vue.set(this,'wuli',123);//錯誤

附：

1 如何設置響應式屬性？

第一種：初始化時寫入data屬性

第二種：Vue.set(target,key,val) | 實例對象.$set( )

• target對象不能是vue實例，或者Vue實例的根數據對象

第三種：數值變異方法

• push()
• unshift()
• pop()
• shift()
• splice()
• sort()
• reverse()