快捷導(dǎo)航

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

更新時間：2023年02月18日 11:02:05 作者：wintercat-

由于 Vue 會在初始化實例時進(jìn)行雙向數(shù)據(jù)綁定，使用Object.defineProperty()對屬性遍歷添加 getter/setter 方法，所以屬性必須在 data 對象上存在時才能進(jìn)行上述過程，這樣才能讓它是響應(yīng)的，這篇文章主要介紹了Vue中$set()的使用方法場景分析,需要的朋友可以參考下

Vue中$set()的使用方法

前言

由于 Vue 會在初始化實例時進(jìn)行雙向數(shù)據(jù)綁定，使用Object.defineProperty()對屬性遍歷添加 getter/setter 方法，所以屬性必須在 data 對象上存在時才能進(jìn)行上述過程，這樣才能讓它是響應(yīng)的。如果要給對象添加新的屬性，此時新屬性沒有進(jìn)行過上述過程，不是響應(yīng)式的，所以會出現(xiàn)數(shù)據(jù)變化，頁面不變的情況。此時需要用到$set

$set()的應(yīng)用場景一

在使用 vue 進(jìn)行代碼開發(fā)時，經(jīng)常會遇到需要給一個響應(yīng)式對象增加屬性的情況
示例數(shù)據(jù)

myInfo: {
  name: 'wintercat',
  age: '18'
}

剛開始我們可能會這樣寫this.myInfo.age = 23屬性是增加上去了，但一會之后你就會發(fā)現(xiàn)不對勁，為啥這個新增的屬性不是響應(yīng)式的,這種時候應(yīng)該使用$set去添加屬性，this.$set(this.myInfo, 'age', 24),這時對象數(shù)據(jù)就變成響應(yīng)式的了
這個方法接收三個參數(shù)

參數(shù)	描述
target	可以是數(shù)組或者對象,是準(zhǔn)備添加屬性的對象或者數(shù)組
name/index	準(zhǔn)備添加的屬性的屬性名或數(shù)字的索引
value	準(zhǔn)備添加的屬性的值或者數(shù)組索引的值

$set()的應(yīng)用場景二

在我們拿到后端返回的數(shù)據(jù)進(jìn)行頁面渲染時發(fā)現(xiàn)需要顯示的數(shù)據(jù)的字段名都是一樣的,但是給了一個字段名進(jìn)行區(qū)分，這種情況下我們就需要拿到進(jìn)行區(qū)分的字段名的值當(dāng)做鍵名，通過使用鍵值對的形式返回一個新的數(shù)據(jù)對頁面進(jìn)行渲染
示例數(shù)據(jù)

newInfo:[],
info:[
  {
    age:20, 
    name:'張三'
  },
  {
    age:30, 
    name:'李四'
  },
  {
    age:40, 
    name:'王五'
  },
]

我們先對數(shù)據(jù)進(jìn)行循環(huán)然后通過$set去添加需要的數(shù)據(jù)格式，這樣我們拿到的數(shù)據(jù)就是我們想要的數(shù)據(jù)：name：age

this.info.map((item) => {
  this.$set(this.newInfo, item.name, item.age)
})
console.log(this.newInfo)
// this.newInfo:[{'張三', 20},{'李四', 30},{'王五', 40}]

補(bǔ)充：vue中$set的用法

vue中$set的用法

$set用來更新數(shù)組或?qū)ο?/p>

$set接收3個參數(shù)：參數(shù)1:參數(shù)是需要更新的數(shù)組或?qū)ο螅?br /> 參數(shù)2:是數(shù)組的下標(biāo)或者對象的屬性名，
參數(shù)3:是更新的內(nèi)容

$set用于更新數(shù)組：

let arr =["周一","周二","周三","周四","周五","周六"];
//第一個參數(shù)是數(shù)組，第二個參數(shù)是下標(biāo)索引，第三個參數(shù)是新的內(nèi)容
this.$set(arr,5,"周日"];
//結(jié)果
console.log(arr);//arr=["周一","周二","周三","周四","周五","周日"]

$set用于更新對象：

//對象的屬性sex的值更新為"女"
let obj={name:"小明",age:18,sex:"男"};
?//第一個參數(shù)是對象，第二個參數(shù)是更新的屬性名稱，第三個參數(shù)是更新的內(nèi)容
this.$set(obj,"sex","女");
?//結(jié)果
console.log(obj)//obj={name:"小明",age:18,sex:"女"}

到此這篇關(guān)于Vue中$set()的使用方法的文章就介紹到這了,更多相關(guān)Vue中$set()使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: