vue中this.$set()的使用

发布时间 2023-12-07 14:09:55作者: IT小姐姐

data中数据,都是响应式。也就是说,如果操作data中的数据,视图会实时更新;

但在实际开发中,遇到过一个坑:若data中数据类型较为复杂,方法methods中改变对象的属性,而页面并不会改变

原因是vue监听不到数据类型特别复杂的属性。

可以使用this.$set()来进行强制更新,进而解决问题

一。对象操作:

 三个参数:this.$set("需要改变的对象","需要改变的对象属性","值")

  定义数据对象:
  obj: { name: "小明", age: 18, },

  1.对象的修改

this.$set(this.obj, "name", "小刘"); 
 
控制台输出:obj: { name: "小刘", age: 18, },

  2.对象的新增

this.$set(this.obj, "hobby", "study");
 
控制台输出:obj: { name: "小明", age: 18, hobby: "study"},  

  

二。数组操作:

  三个参数:this.$set("数组","下标","值")

  定义数组包对象:
  arr: [
    { name: "小王", age: 18 },
    { name: "小张", age: 20 },
  ],

  定义普通数组:
  twoArr: [11, 22, 33, ],
  1.数组的修改

修改数组对象:
this.$set(this.arr, 1, { name: "小王", age: 19 });
          
控制台输出:arr: [ { name: "小王", age: 18 },{ name: "小王", age: 19 }, ],

 修改普通数组:
 this.$set(this.twoArr, 0, 99);

 控制台输出:twoArr: [99, 22, 33, ],

  2.数组新增

  (1)首先需要获取新增的数组长度:

      let reslg = this.arr.length;  

  (2)然后添加在数组末尾:

this.$set(this.arr, reslg,{ name: "小紫", age: 18 },);
 
控制台输出:
arr: [ 
        { name: "小王", age: 18 },
        { name: "小张", age: 20 },
        { name: "小紫", age: 18 },
     ],

三、同理,执行删除操作时,对象或数组不更新时可以使用this.$delete

基本语法:
 
this.$delete(this.obj, "name")