vue資料丟失的4中情況和解決方法（附影片教程）

資料丟失是框架的BUG，vue中的資料繫結是透過ES5中屬性的特性實現的。所以沒有設定特性的資料，就會丟失。以下mounted中的四種操作都會導致資料丟失。

<
template>

  
<
div>

    
<
div>{{ colors }}
</
div>

    
<
div>{{ obj }}
</
div>

    
<
div>{{ intro }}
</
div>

  
</
div>


</
template>




<
script>



export 
default {


  data() {


    
return {


      
colors: [
"red", 
"green", 
"blue"],


      
obj: {},


    };


  },


  mounted() {


    
// 1 陣列中的值型別修改



    this.colors[1] = "pink";



    // 2 陣列中的新成員



    this.colors[3] = "gold";



    // 3 物件中的新屬性



    this.obj.size = 200;



    // 4 未初始化的資料



    this.intro = "111111";



  },



};


</
script>

解決方法：

第1,2種情況 使用新陣列替換之前的老陣列

this.colors = [
"red", 
"pink", 
"blue",
"gold"]

第3種情況 使用新物件替換之前的老物件

this.obj = {siz: 
200}

第4種情況 初始化這類資料即可

data() {

    
return {

      
colors: [
"red", 
"green", 
"blue"],

      
obj: {},

      
intro: 
'' 
// 初始化info


    };


  },

除此之外，還可以使用vue提供的$set方法

this.$
set(
this.colors, 
1, pink)  
// 修改陣列的資料


this.$set(this.obj, 'size', 200)  // 修改物件的資料

2020Vue全套教程全開源（強烈推薦）

這是給課後的驚喜，熬夜錄的，學習的夥伴可以留言！