Vue.set與this.$set的用法與使用場景介紹
Vue.set()和this.$set()介紹：
在我們使用vue進(jìn)行開發(fā)的過程中，可能會遇到一種情況：當(dāng)生成vue實例后，當(dāng)再次給數(shù)據(jù)賦值時，有時候并不會自動更新到視圖上去；
當(dāng)我們?nèi)タ磛ue文檔的時候，會發(fā)現(xiàn)有這么一句話：如果在實例創(chuàng)建之后添加新的屬性到實例上，它不會觸發(fā)視圖更新。
一。為什么有Vue.set
由于JavaScript的限制，Vue無法檢測到data中數(shù)組和對象的變化，因此也不會觸發(fā)視圖更新
二。解決方法
數(shù)組
1.使用Vue提供的變異方法
Vue對這些JS數(shù)組方法進(jìn)行了封裝，通過這些方法是可以檢測到數(shù)組更新的。
2.將原數(shù)組整個替換
如下例中，是要實現(xiàn)vm.items[1] = ‘excess’
<body>
<div id="app">
<ul>
<li v-for="(item, index) in items">
{{ index }} : {{ item }}
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
items: ['a', 'b', 'c']
},
created() {
this.items = ['a', 'test', 'c']
}
})
</script>
</body>
3.使用Vue.set（見后文）
對象
1.將原對象整個替換
如下例中，是要實現(xiàn)給object新增一個鍵值對{test: ‘newthing’}
<body>
<div id="app">
<ul>
<li v-for="(value, name) in object">
{{ name }} : {{ value }}
</li>
</ul>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
},
created() {
this.object = {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10',
test: 'newthing'
}
}
})
</script>
</body>
2.使用Vue.set（見后文）
三。Vue.set
對于數(shù)組
Vue不能檢測以下數(shù)組的變動:
- 利用索引值直接設(shè)置一個數(shù)組項時，例如
vm.list[0]=newValue - 修改數(shù)組長度時，例如
vm.list.length=newLength
舉個栗子
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是響應(yīng)性的
vm.items.length = 2 // 不是響應(yīng)性的
這時可以使用Vue.set或者this.$set
使用方法
Vue.set(target,index,newValue)
// Vue.set Vue.set(vm.items, indexOfItem, newValue)
// this.$set vm.$set(vm.items, indexOfItem, newValue)
對于對象
Vue 無法檢測 property 的添加或移除。由于 Vue 會在初始化實例時對 property 執(zhí)行 getter/setter 轉(zhuǎn)化，所以 property 必須在 data 對象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。
舉個栗子
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是響應(yīng)式的
vm.b = 2
// `vm.b` 是非響應(yīng)式的
使用方法
Vue.set(target,key,value)
Vue.set(vm.someObject, 'b', 2)
this.$set(this.someObject,'b',2)
注意
Vue不允許動態(tài)添加根級響應(yīng)式屬性
const app = new Vue({
data: {
a: 1
}
// render: h => h(Suduko)
}).$mount('#app1')
Vue.set(app.data, 'b', 2)
只可以使用Vue.set(object, propertyName, value) 方法向嵌套對象添加響應(yīng)式屬性
var vm=new Vue({
el:'#test',
data:{
//data中已經(jīng)存在info根屬性
info:{
name:'小明';
}
}
});
//給info添加一個性別屬性
Vue.set(vm.info,'sex','男');
四。使用場景
當(dāng)我們對data中的數(shù)組或?qū)ο筮M(jìn)行修改時，有些操作方式是非響應(yīng)式的，Vue檢測不到數(shù)據(jù)更新，因此也不會觸發(fā)視圖更新。此時需要使用Vue.set()進(jìn)行響應(yīng)式的數(shù)據(jù)更新。
到此這篇關(guān)于Vue.set與this.$set的用法與使用場景的文章就介紹到這了,更多相關(guān)Vue.set與this.$set用法內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue切換Tab動態(tài)渲染組件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要為大家詳細(xì)介紹了vue自定義氣泡彈窗，包含css晃動動畫shake制作，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
相信tab切換對于大家來說都不算陌生，后臺管理系統(tǒng)中多會用到。如果不知道的話，可以看一下瀏覽器上方的標(biāo)簽頁切換，大概效果就是這樣。2021-05-05
toRef 和 toRefs都是Vue3 中的響應(yīng)式轉(zhuǎn)換工具函數(shù),換句話說,toRef 和 toRefs 就是用來創(chuàng)建響應(yīng)式的引用的,主要用來取出響應(yīng)式對象里的屬性,或者解構(gòu)響應(yīng)式對象,本文小編就來帶大家搞清楚Vue3中toRef和toRefs的區(qū)別,需要的朋友可以參考下2023-09-09
vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式
這篇文章主要介紹了vue循環(huán)中調(diào)用接口-promise.all();按順序執(zhí)行異步處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
Vue?quill-editor?編輯器使用及自定義toobar示例詳解
這篇文章主要介紹了Vue quill-editor編輯器使用及自定義toobar示例詳解,這里講解編輯器quil-editor的知識結(jié)合實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
vue中關(guān)于confirm確認(rèn)框的用法
這篇文章主要介紹了vue中關(guān)于confirm確認(rèn)框的用法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-08-08
這篇文章主要介紹了基于Vuejs和Element的注冊插件的編寫方法,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了使用Vue開發(fā)自己的Chrome擴展程序過程詳解，瀏覽器擴展程序是可以修改和增強 Web 瀏覽器功能的小程序。它們可用于各種任務(wù)，例如阻止廣告，管理密碼，組織標(biāo)簽，改變網(wǎng)頁的外觀和行為等等。,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了淺談vue中resetFields()使用注意事項，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08