当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了

官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性

调用方法: Vue.set( target , key , value)

target: 要更改的数据源（可以是一个对象或者数组）
key 要更改的具体数据 （索引）
value 重新赋的值

<template>
  <div id="app">
    <div v-for="item in items" :key="item.id">
      {{ item.name }},{{ item.id }}
    </div>
    <el-button @click="handClick()">更改数据</el-button>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      items: [
        { name: "张三", id: "1" },
        { name: "李四", id: "2" },
        { name: "王五", id: "3" },
      ],
    };
  },
  mounted() {
    this.items[0] = { name: "张三三", id: "11" }; //此时对象的值更改了，但是视图没有更新
  },
  methods: {
    handClick() {
      this.$set(this.items, 1, { name: "李四四", id: "22" });
      this.$set(this.items[2], "name", "王五五");
    },
  },
};
</script>