使用vue中的$set，解決vue數據改變而視圖不更新的問題

在咱們使用vue進行開發的過程當中，可能會遇到一種狀況：當生成vue實例後，當再次給數據賦值時，有時候並不會自動更新到視圖上去。

當咱們去看vue文檔的時候，會發現有這麼一句話：若是在實例建立以後添加新的屬性到實例上，它不會觸發視圖更新。

代碼以下：

export default { name: 'formmanagement', data () { return {
 objData:{
　　　　　　　　name:'花生',
　　　　　　　　age:'100',

　　　　　　},
 } }, methods: { },  }

以上代碼若是在頁面渲染確定顯示沒問題，能正常顯示name：花生，age：100。

可是若是加上如下代碼,3秒以後添加一個sex屬性，雖然數據添加進去了，但此時頁面是不會從新渲染的。

 mounted(){ var _this. this; setTimeout(function(){ _this.objData.sex = "男"; }, 3000); }, 

因此解決辦法須要使用set方法設置data屬性，正確寫法以下：

 mounted(){ var _this. this; setTimeout(function(){ _this.objData.sex = ""; _this.$set(_this.objData,_this.objData.sex,"男"); }, 3000); },