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)  // 修改对象的数据