Vue中$set()的使用方法

前言

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

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

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

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

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

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

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

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

我們先對(duì)數(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個(gè)參數(shù)：參數(shù)1:參數(shù)是需要更新的數(shù)組或?qū)ο螅?br />                參數(shù)2:是數(shù)組的下標(biāo)或者對(duì)象的屬性名，
                參數(shù)3:是更新的內(nèi)容

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

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

$set用于更新對(duì)象：

//對(duì)象的屬性sex的值更新為"女"
let obj={name:"小明",age:18,sex:"男"};
?//第一個(gè)參數(shù)是對(duì)象，第二個(gè)參數(shù)是更新的屬性名稱，第三個(gè)參數(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論