数据丢失是框架的BUG，vue中的数据绑定是通过ES5中属性的特性实现的。所以没有设置特性的数据，就会丢失。以下mounted中的四种操作都会导致数据丢失。

在新巴尔虎右等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供网站设计、成都做网站 网站设计制作按需网站开发,公司网站建设,企业网站建设,高端网站设计,营销型网站建设,外贸网站制作,新巴尔虎右网站建设费用合理。

<
template>
 
<
div>
   
<
div>{{ colors }}

   
<
div>{{ obj }}

   
<
div>{{ intro }}

 



<
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";
  },
};

解决方法：

第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全套教程全开源（强烈推荐）https://pan.baidu.com/s/15_Q2Mn_Vr_vL6PaJJ7ueGw

这是给课后的惊喜，熬夜录的，学习的伙伴可以留言！

分享名称：vue数据丢失的4中情况和解决方法（附视频教程）
文章URL：http://scyanting.com/article/pihipd.html