vue数据丢失的4中情况和解决方法(附视频教程)

数据丢失是框架的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";
 },
};

vue数据丢失的4中情况和解决方法(附视频教程)

解决方法:

第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中情况和解决方法(附视频教程)
地址分享:http://lszwz.com/article/pihipd.html

其他资讯

售后响应及时

7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉,无效全额退款