vue+ts：Vue.set在对象和数组中的具体运用

为什么用Vue.set

最近在Vue项目实践中发现，有时候直接改变数组或对象的在值，值改变了，但页面却没有同时修改，通过查看Vue文档才发现，原来Vue不能检测数组或对象的变化，要想改变数组或对象的值时，需要使用Vue.set（）方法进行操作。

Vue.set在对象中使用

Vue.set()在对象中使用格式为Vue.set(修改的对象, ‘对象的key’, ‘修改的值’)，比入Vue.set(this.vueSetObj, ‘name’, ‘周bug’);这个就会把name的吴越修改成周bug这个值。Vue.set()在对象中使用一般分为两种情况
情况一：如果Vue.set(修改的对象, ‘对象的key’, ‘修改的值’)对象的key在对象中存在，则修改

      <div>
        <h3>id:{{ vueSetObj.id }}</h3>
        <h3>name:{{ vueSetObj.name }}</h3>
        <h3>class:{{ vueSetObj.class }}</h3>
        <a-button type="primary" @click="objSet">对象Vue.set修改name</a-button>
      </div>

  vueSetObj: { id: number; name: string; class: string } = {
    id: 1,
    name: '吴越',
    class: '3班',
  };

  objSet() {
    Vue.set(this.vueSetObj, 'name', '周bug');
    console.log('vue.set后', this.vueSetObj);
  }

情况二：如果Vue.set(修改的对象, ‘对象的key’, ‘修改的值’)对象的key在对象中不存在，则为对象添加一个新的key和值

Vue.set在数组中使用

Vue.set()在数组中使用格式为Vue.set(修改的数组, ‘修改数组的索引’, ‘修改的值’)。

数组使用情况一:当数组元素为对象时

      <div v-for="(obj, index) in vueSetObj" :key="index">
        <h3>id:{{ obj.id }}</h3>
        <h3>name:{{ obj.name }}</h3>
        <h3>class:{{ obj.class }}</h3>
        <a-button type="primary" @click="arrayVueSet(index)">对象Vue.set修改name</a-button>
      </div>

  vueSetObj: { id: number; name: string; class: string }[] = [
    {
      id: 1,
      name: '张一',
      class: '1班',
    },
    {
      id: 2,
      name: '张二',
      class: '2班',
    },
    {
      id: 3,
      name: '张三',
      class: '3班',
    },
  ];

  arrayVueSet(index) {
    Vue.set(this.vueSetObj, index, {
      id: 100,
      name: '张100',
      class: '100班',
    });
  }

数组使用情况二：当数组的元素为基本数据类型时

      <div v-for="(element, index) in vueSetObj" :key="index">
        <h3>数组元素:{{ element }}</h3>
        <a-button type="primary" @click="arrayVueSet(index)">对象Vue.set修改name</a-button>
      </div>

  vueSetArray: any[] = [1, 2, 3, 4, 5, 6, 7];

  arrayVueSet(index) {
    Vue.set(this.vueSetObj, index, index + 100);
  }

总结：

最后发现数组在Vue.set（）的使用情况没有多大变化，都是根据数组的下标去修改对应的值，而对象如果在使用Vue.set中，操作的key存在时，则修改对应key的值，不存在则为对象添加新的key和值