Vue中$set()的使用方法

前言

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

$set()的應用場景一

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

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

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

$set()的應用場景二

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

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

我們先對數(shù)據(jù)進行循環(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}]

補充：vue中$set的用法

vue中$set的用法

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

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

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

let arr =["周一","周二","周三","周四","周五","周六"];
//第一個參數(shù)是數(shù)組，第二個參數(shù)是下標索引，第三個參數(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:"女"}

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

最新評論