有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

this.$set()(vue数据丢失的4中情况和解决方法)

vue 炮渣日记 3周前 (11-17) 17次浏览 已收录 0个评论 扫描二维码

数据丢失是框架的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>
this.$set()(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)  // 修改对象的数据
喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址