vue中$set用法詳解
摘要：地址沒有改變，vue就監(jiān)測不到數(shù)據(jù)變化。這個時候，雙向綁定就失效了。
想了解有關(guān)JS堆棧的知識？請點擊這里。
1、為什么要用set？
在vue中，并不是任何時候數(shù)據(jù)都是雙向綁定的。
在官方文檔中，有這樣一段話，如下：
從文檔得知，當數(shù)據(jù)沒有被雙向綁定的時候，我們就需要使用set了
2、set用法
解決數(shù)據(jù)沒有被雙向綁定我們可以使用 vm.$set 實例方法，該方法是全局方法 Vue.set 的一個別名。
- this.$set(原數(shù)組, 索引值, 需要賦的值)
length的問題還需要用splice方法。
- vm.items.splice(newLength)
3、什么時候使用set？
set為解決雙向綁定失效而生，我們只需要關(guān)注什么時候雙向綁定失效就可以了。
筆者看完了官方文檔以后，總結(jié)了一下，只要值的地址沒有改變，vue是檢測不到數(shù)據(jù)變化的。
共有下面三種情況：
- 當你利用索引直接設(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.b不是響應(yīng)式的，簡單的來說，如果對象中原來沒有這個key，新增的key是無法雙向綁定的。
當然這里我們同樣可以用set去解決這個問題：
vm.$set(vm.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'
})4、文檔地址
https://cn.vuejs.org/v2/guide/list.html#logo
以上。
到此這篇關(guān)于vue中$set用法詳細講解的文章就介紹到這了,更多相關(guān)vue中$set用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了在vue-cli中組件通信的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
在本篇文章里小編給大家整理的是一篇關(guān)于vue中插槽整理及用法分析內(nèi)容，對此有興趣的朋友們可以跟著學(xué)習(xí)下。2021-12-12
這篇文章主要介紹了vue中如何更改element-ui主題色，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
uniapp實現(xiàn)APP、小程序與webview頁面間通訊的實現(xiàn)步驟
這篇文章主要介紹了uniapp實現(xiàn)APP、小程序與webview頁面間通訊的實現(xiàn)步驟,在Uniapp開發(fā)的APP或小程序頁面中嵌入一個H5網(wǎng)頁,并實現(xiàn)H5頁面與APP之間的數(shù)據(jù)傳遞,需要的朋友可以參考下2025-01-01
這篇文章主要為大家詳細介紹了vue版日歷組件的實現(xiàn)方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue路由之JWT身份認證的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
這篇文章主要介紹了vue彈窗里面使用echarts不顯示的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
mpvue小程序循環(huán)動畫開啟暫停的實現(xiàn)方法
這篇文章主要介紹了mpvue小程序循環(huán)動畫開啟暫停的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
在前端開發(fā)中,實現(xiàn)自定義右鍵菜單能夠為用戶提供更多功能選項,本文就來介紹了Vue中實現(xiàn)動態(tài)右鍵菜單的示例代碼,感興趣的可以了解一下2024-11-11
elementui中tabel組件的scope.$index的使用及說明
這篇文章主要介紹了elementui中tabel組件的scope.$index的使用及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10