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