? vue中$set用法詳細講解

1、認識

在vue中，并不是任何時候數(shù)據(jù)都是雙向綁定的。

官方文檔介紹

使用場景

當數(shù)據(jù)沒有被雙向綁定的時候，我們就需要使用set了`

舉個例子：
vue的data里邊聲明或者已經(jīng)賦值過的對象或者數(shù)組（數(shù)組里邊的值是對象）時，向?qū)ο笾刑砑有碌膶傩?#xff0c;如果更新此屬性的值，是不會更新視圖的。

2、$set用法

數(shù)據(jù)沒有被雙向綁定我們可以使用 vm.$set 實例方法，該方法是全局方法 Vue.set 的一個別名

- this.$set(原數(shù)組, 索引值, 需要賦的值)

length的問題還需要用splice方法

 - vm.items.splice(newLength)

set為解決雙向綁定失效，所以什么時候雙向綁定失效就用它

當你利用索引直接設(shè)置一個數(shù)組項時，例如：vm.items[indexOfItem] = newValue
當你修改數(shù)組的長度時，例如：vm.items.length = newLength
由于 JavaScript 的限制，Vue不能檢測對象屬性的添加或刪除

var vm= new Vue({data: {a: 1}
})
// `vm.a` 現(xiàn)在是響應(yīng)式的vm.b = 2
// `vm.b` 不是響應(yīng)式的

vm.a是響應(yīng)式的， vm.b不是響應(yīng)式的

簡單來說

對象中原來有這個key=> 雙向綁定
對象中原來沒有這個key，新增的key=>不是雙向綁定

vm.$set(con.userProfile, 'age', 27)

進一步使用

如果我們添加的屬性很多條，可能就需要寫一個循環(huán)來多次set
你也可能使用Object.assign，這里有一些需要注意的地方。
如果你想添加新的響應(yīng)式屬性，下面這樣寫是不行的。

Object.assign(vm.userProfile, {age: 27,favoriteColor: 'Vue Green'
})

這樣才是正確的

vm.userProfile = Object.assign({}, vm.userProfile, {age: 27,favoriteColor: 'Vue Green'
})

3、原理

————————————————————————————

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

向響應(yīng)式對象中添加一個 property，并確保這個新 property 同樣是響應(yīng)式的，且觸發(fā)視圖更新。它必須用于向響應(yīng)式對象上添加新 property，因為 Vue 無法探測普通的新增 property
(比如 this.myObject.newProperty = ‘hi’)

————————————————————————————