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