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

待我称王封你为后i 2022-10-16 06:10 143阅读 0赞

## 为什么用Vue.set ##

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

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b-15L2g6YKj5Lid5b6u56yR_size_20_color_FFFFFF_t_70_g_se_x_16]

## 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);
      }

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b-15L2g6YKj5Lid5b6u56yR_size_13_color_FFFFFF_t_70_g_se_x_16]  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b-15L2g6YKj5Lid5b6u56yR_size_13_color_FFFFFF_t_70_g_se_x_16 1]  
**情况二：如果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班',
        });
      }

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b-15L2g6YKj5Lid5b6u56yR_size_20_color_FFFFFF_t_70_g_se_x_16 1]

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

<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);
      }

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b-15L2g6YKj5Lid5b6u56yR_size_20_color_FFFFFF_t_70_g_se_x_16 2]

## 总结： ##

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

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b-15L2g6YKj5Lid5b6u56yR_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20221014/6ba1ac8c42c047dd8b57d0e3fe896b9b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b-15L2g6YKj5Lid5b6u56yR_size_13_color_FFFFFF_t_70_g_se_x_16]: /images/20221014/37c9f63fafcb43c1ab80862052bfde8b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b-15L2g6YKj5Lid5b6u56yR_size_13_color_FFFFFF_t_70_g_se_x_16 1]: /images/20221014/5164324897184e87ab43a4420d98c5a5.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b-15L2g6YKj5Lid5b6u56yR_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20221014/0d0bb51b860f4c73adfd42252b5498b7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5b-15L2g6YKj5Lid5b6u56yR_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20221014/1eb54cd0539644249c6c22b3e4f745df.png