FCAT

Appearance

在vue的实例方法中，$set可以更新对象数据或是数组，有时在实际的开发过程中，对象的数据可能会没有及时地更新，导致页面渲染的值还是旧值，这个时候就可以使用$set去重新更新下数据。

使用$set()去更新对象 ​

使用方法：$set(data选项中的对象名, 属性名, 属性值)

html
<template>
  <div class="demo">
    <ul>
      <li v-for="(item, index) of user" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      user: {
        name: "xiaochen",
        addr: "china",
        userAge: 18,
      },
    };
  },
  created() {
    console.log('created生命周期：',this.user);
  },
  updated() {
    console.log('updated生命周期：',this.user);
  },
  methods: {
    add() {
      this.$set(this.user, "score", 90);
    },
  },
};
</script>
<template>
  <div class="demo">
    <ul>
      <li v-for="(item, index) of user" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      user: {
        name: "xiaochen",
        addr: "china",
        userAge: 18,
      },
    };
  },
  created() {
    console.log('created生命周期：',this.user);
  },
  updated() {
    console.log('updated生命周期：',this.user);
  },
  methods: {
    add() {
      this.$set(this.user, "score", 90);
    },
  },
};
</script>

使用$set()去更新数组 ​

数组的处理方法有两种，一种是直接通过修改数组的引用从而达到改变数组内容在页面重新渲染的效果，这种方法实际开发中不推荐，比较笨重。

2.1 通过修改数组的引用 ​

html
<template>
  <div class="demo">
    <ul>
      <li v-for="(item, index) of typeList" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      typeList:['苹果','香蕉','草莓']
    };
  },
  created() {
    console.log('created生命周期：',this.typeList);
  },
  updated() {
    console.log('updated生命周期：',this.typeList);
  },
  methods: {
    add() {
      this.typeList = ['苹果','冬瓜','草莓']
    },
  },
};
</script>
<template>
  <div class="demo">
    <ul>
      <li v-for="(item, index) of typeList" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      typeList:['苹果','香蕉','草莓']
    };
  },
  created() {
    console.log('created生命周期：',this.typeList);
  },
  updated() {
    console.log('updated生命周期：',this.typeList);
  },
  methods: {
    add() {
      this.typeList = ['苹果','冬瓜','草莓']
    },
  },
};
</script>

根据结果可以看到，this.typeList = ['苹果','冬瓜','草莓']这样是可以修改数组内容，同时能达到页面重新渲染数组元素的效果，但是就是非常不实用。

2.2 通过数组的操作方法去修改（push()，pop()，splice()等） ​

修改数组元素个人喜欢spice()方法，splice(插入的位置索引号，删除元素的个数，插入的元素)

html
<template>
  <div class="demo">
    <ul>
      <li v-for="(item, index) of typeList" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      typeList:['苹果','香蕉','草莓']
    };
  },
  created() {
    console.log('created生命周期：',this.typeList);
  },
  updated() {
    console.log('updated生命周期：',this.typeList);
  },
  methods: {
    add() {
    //   this.typeList.push('冬瓜')
    this.typeList.splice(1,1,'冬瓜')
    },
  },
};
</script>
<template>
  <div class="demo">
    <ul>
      <li v-for="(item, index) of typeList" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      typeList:['苹果','香蕉','草莓']
    };
  },
  created() {
    console.log('created生命周期：',this.typeList);
  },
  updated() {
    console.log('updated生命周期：',this.typeList);
  },
  methods: {
    add() {
    //   this.typeList.push('冬瓜')
    this.typeList.splice(1,1,'冬瓜')
    },
  },
};
</script>

可以看到，this.typeList.splice(1,1,'冬瓜')这样做也可以实现数组的元素内容更新，并且页面也能重新渲染，updated()生命周期函数也执行了。

2.3 直接修改数组索引位置导致的一系列问题 ​

在js中，还有一种修改数组的方法，那就是通过直接修改数组索引下标，从而修改数组中的元素数据内容，但是这样做，就会出现，数组更新了，但是页面没有重新渲染，也就是说，updated()生命周期函数没有执行！

html
<template>
  <div class="demo">
    <ul>
      <li v-for="(item, index) of typeList" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      typeList: ["苹果", "香蕉", "草莓"],
    };
  },
  created() {
    console.log("created生命周期：", this.typeList);
  },
  updated() {
    console.log("updated生命周期：", this.typeList);
  },
  methods: {
    add() {
      this.typeList[1] = "冬瓜";
      console.log("打印修改后数组中的数据：", this.typeList);
    },
  },
};
</script>
<template>
  <div class="demo">
    <ul>
      <li v-for="(item, index) of typeList" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      typeList: ["苹果", "香蕉", "草莓"],
    };
  },
  created() {
    console.log("created生命周期：", this.typeList);
  },
  updated() {
    console.log("updated生命周期：", this.typeList);
  },
  methods: {
    add() {
      this.typeList[1] = "冬瓜";
      console.log("打印修改后数组中的数据：", this.typeList);
    },
  },
};
</script>

可以看到，使用这种方法就会导致页面数据没有进行重新渲染！但是数组确实是发生了变化的。因此，实际开发中需要避开这种操作，以免产生数据渲染失败的问题。

2.4 使用$set()同样可以修改数组 ​

$set()的使用方法是this.$set(数组名，插入的索引下标值，插入的数据元素)

html
<template>
  <div class="demo">
    <ul>
      <li v-for="(item, index) of typeList" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      typeList:['苹果','香蕉','草莓']
    };
  },
  created() {
    console.log('created生命周期：',this.typeList);
  },
  updated() {
    console.log('updated生命周期：',this.typeList);
  },
  methods: {
    add() {
      this.$set(this.typeList, 1, '榴莲');
    },
  },
};
</script>
<template>
  <div class="demo">
    <ul>
      <li v-for="(item, index) of typeList" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="add">添加</button>
  </div>
</template>

<script>
export default {
  name: "demo",
  data() {
    return {
      typeList:['苹果','香蕉','草莓']
    };
  },
  created() {
    console.log('created生命周期：',this.typeList);
  },
  updated() {
    console.log('updated生命周期：',this.typeList);
  },
  methods: {
    add() {
      this.$set(this.typeList, 1, '榴莲');
    },
  },
};
</script>

这种修改数组的方式，同样是能够达到数组的内容发送改变并且页面也是能够重新渲染的。