vue中$set用法詳解
摘要：地址沒有改變，vue就監(jiān)測不到數(shù)據(jù)變化。這個時候，雙向綁定就失效了。
想了解有關(guān)JS堆棧的知識？請點擊這里。
1、為什么要用set？
在vue中，并不是任何時候數(shù)據(jù)都是雙向綁定的。
在官方文檔中，有這樣一段話，如下：
從文檔得知，當(dāng)數(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ù)變化的。
共有下面三種情況：
- 當(dāng)你利用索引直接設(shè)置一個數(shù)組項時，例如：vm.items[indexOfItem] = newValue
- 當(dāng)你修改數(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是無法雙向綁定的。
當(dāng)然這里我們同樣可以用set去解決這個問題：
vm.$set(vm.userProfile, 'age', 27)
如果我們添加的屬性很多條，可能就需要寫一個循環(huán)來多次set。當(dāng)然你也可能使用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用法詳細(xì)講解的文章就介紹到這了,更多相關(guān)vue中$set用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vue2.0實現(xiàn)組件之間數(shù)據(jù)交互和通信操作示例
這篇文章主要介紹了Vue2.0實現(xiàn)組件之間數(shù)據(jù)交互和通信操作,結(jié)合實例形式分析了vue2.0組件之間通信的原理、實現(xiàn)方法及相關(guān)操作注意事項,需要的朋友可以參考下2019-05-05
玩轉(zhuǎn)vue的slot內(nèi)容分發(fā)
這篇文章主要介紹了玩轉(zhuǎn)vue的slot內(nèi)容分發(fā)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
微信小程序地圖導(dǎo)航功能實現(xiàn)完整源代碼附效果圖（推薦）
這篇文章主要介紹了微信小程序地圖導(dǎo)航功能實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue ssr 指南詳讀,詳細(xì)的介紹了什么是SSR以及如何使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
這篇文章主要介紹了Vue中el-table條件渲染防止樣式亂掉問題,通過使用:key="Math.random()" 可解決樣式錯亂問題,此key屬性是vue自帶的特殊屬性,主要用在 Vue 的虛擬 DOM 算法,在新舊 nodes 對比時辨識 VNodes,依次來提升頁面渲染性能,感興趣的朋友一起看看吧2023-11-11
Nuxt3?使用?Vue.js?作為視圖引擎，Nuxt3?中提供了所有?Vue?3?功能，所以我們創(chuàng)建的Nuxt項目其實也是vue3項目，這篇文章主要介紹了Nuxt3重點特性使用舉例記錄,需要的朋友可以參考下2022-12-12
使用Vue.js和Element-UI做一個簡單登錄頁面的實例
下面小編就為大家分享一篇使用Vue.js和Element-UI做一個簡單登錄頁面的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
最近在項目開發(fā)中碰到一個需求是在頁面中展示pdf預(yù)覽功能,下面這篇文章主要給大家介紹了關(guān)于Vue3項目中預(yù)覽并打印PDF的兩種方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue-cli工程webpack的基本用法，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)選項卡tab切換制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03