Vue中$set()的使用方法场景分析.docx

第

Vue中$set()的使用方法场景分析

目录Vue中$set()的使用方法前言$set()的应用场景一$set()的应用场景二补充：vue中$set的用法$set用于更新数组：$set用于更新对象：

Vue中$set()的使用方法

前言

由于Vue会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加getter/setter方法，所以属性必须在data对象上存在时才能进行上述过程，这样才能让它是响应的。如果要给对象添加新的属性，此时新属性没有进行过上述过程，不是响应式的，所以会出现数据变化，页面不变的情况。此时需要用到$set

$set()的应用场景一

在使用vue进行代码开发时，经常会遇到需要给一个响应式对象增加属性的情况示例数据

myInfo:{

name:wintercat,

age:18

}

刚开始我们可能会这样写this.myInfo.age=23属性是增加上去了，但一会之后你就会发现不对劲，为啥这个新增的属性不是响应式的,这种时候应该使用$set去添加属性，this.$set(this.myInfo,age,24),这时对象数据就变成响应式的了这个方法接收三个参数

参数描述target可以是数组或者对象,是准备添加属性的对象或者数组name/index准备添加的属性的属性名或数字的索引value准备添加的属性的值或者数组索引的值

$set()的应用场景二

在我们拿到后端返回的数据进行页面渲染时发现需要显示的数据的字段名都是一样的,但是给了一个字段名进行区分，这种情况下我们就需要拿到进行区分的字段名的值当做键名，通过使用键值对的形式返回一个新的数据对页面进行渲染示例数据

newInfo:[],

info:[

age:20,

name:张三

age:30,

name:李四

age:40,

name:王五

]

我们先对数据进行循环然后通过$set去添加需要的数据格式，这样我们拿到的数据就是我们想要的数据：name：age

this.info.map((item)={

this.$set(this.newInfo,item.name,item.age)

console.log(this.newInfo)

//this.newInfo:[{张三,20},{李四,30},{王五,40}]

补充：vue中$set的用法

vue中$set的用法

$set用来更新数组或对象

$set接收3个参数：参数1:参数是需要更新的数组或对象，

参数2:是数组的下标或者对象的属性名，

参数3:是更新的内容

$set用于更新数组：

letarr=[周一,周二,周三,周四,周五,周六];

//第一个参数是数组，第二个参数是下标索引，第三个参数是新的内容

this.$set(arr,5,周日];

console.log(arr);//arr=[周一,周二,周三,周四,周五,周日]

$set用于更新对象：

//对象的属性sex的值更新为女

letobj={name:小明,age:18,sex:男};

?//第一个参数是对象，第二个参数是更新的属性名称，第三个参数是更新的内容

this.$set(obj,sex,女);

?//结果

console.log(obj)//obj={name:小明,age:18,sex:女}