Vue.set與this.$set的用法與使用場景介紹
Vue.set()和this.$set()介紹：
在我們使用vue進行開發(fā)的過程中，可能會遇到一種情況：當生成vue實例后，當再次給數(shù)據(jù)賦值時，有時候并不會自動更新到視圖上去；
當我們去看vue文檔的時候，會發(fā)現(xiàn)有這么一句話：如果在實例創(chuàng)建之后添加新的屬性到實例上，它不會觸發(fā)視圖更新。
一。為什么有Vue.set
由于JavaScript的限制，Vue無法檢測到data中數(shù)組和對象的變化，因此也不會觸發(fā)視圖更新
二。解決方法
數(shù)組
1.使用Vue提供的變異方法
Vue對這些JS數(shù)組方法進行了封裝，通過這些方法是可以檢測到數(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ù)組項時，例如
vm.list[0]=newValue - 修改數(shù)組長度時，例如
vm.list.length=newLength
舉個栗子
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是響應性的
vm.items.length = 2 // 不是響應性的
這時可以使用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 轉化，所以 property 必須在 data 對象上存在才能讓 Vue 將它轉換為響應式的。
舉個栗子
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是響應式的
vm.b = 2
// `vm.b` 是非響應式的
使用方法
Vue.set(target,key,value)
Vue.set(vm.someObject, 'b', 2)
this.$set(this.someObject,'b',2)
注意
Vue不允許動態(tài)添加根級響應式屬性
const app = new Vue({
data: {
a: 1
}
// render: h => h(Suduko)
}).$mount('#app1')
Vue.set(app.data, 'b', 2)
只可以使用Vue.set(object, propertyName, value) 方法向嵌套對象添加響應式屬性
var vm=new Vue({
el:'#test',
data:{
//data中已經存在info根屬性
info:{
name:'小明';
}
}
});
//給info添加一個性別屬性
Vue.set(vm.info,'sex','男');
四。使用場景
當我們對data中的數(shù)組或對象進行修改時，有些操作方式是非響應式的，Vue檢測不到數(shù)據(jù)更新，因此也不會觸發(fā)視圖更新。此時需要使用Vue.set()進行響應式的數(shù)據(jù)更新。
到此這篇關于Vue.set與this.$set的用法與使用場景的文章就介紹到這了,更多相關Vue.set與this.$set用法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
在Vue3環(huán)境下,使用LogicFlow可實現(xiàn)流程圖的繪制,詳細步驟包括引入LogicFlow庫,注冊節(jié)點與邊,設置主題和渲染數(shù)據(jù),還包括使用Map和Menu進行功能擴展和右鍵編輯,以及通過事件監(jiān)聽實現(xiàn)交互,2024-10-10
vue3+vite+SQL.js如何讀取db3文件數(shù)據(jù)
這篇文章主要介紹了vue3+vite+SQL.js如何讀取db3文件數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了Vue CLI插件開發(fā)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
本文主要介紹了Nginx部署Vue.js前端項目指南,幫助您實現(xiàn)從開發(fā)到線上部署的平滑過渡,確保用戶能夠獲得最佳的訪問體驗,感興趣的可以了解一下2024-09-09
這篇文章主要介紹了Vue3 全局使用按鈕截流指令示例代碼,Vue2與Vue3中的自定義指令實現(xiàn)方式略有不同，但實現(xiàn)的按鈕截流功能是類似的，本文通過示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-05-05
vue根據(jù)權限動態(tài)渲染按鈕、組件等的函數(shù)式組件實現(xiàn)
這篇文章主要介紹了vue根據(jù)權限動態(tài)渲染按鈕、組件等的函數(shù)式組件實現(xiàn)方式,具有很好的參考價值,希望杜大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要介紹了使用100行代碼實現(xiàn)vue表單校驗功能，本文通過實例截圖給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
當el-select的disabled屬性為true的時候不展示“請選擇”字樣,如何去掉el-select 元素的 placeholder 屬性呢,下面小編通過示例代碼給大家分享el-select如何去掉placeholder屬性,感興趣的朋友一起看看吧2023-12-12
vue中使用axios post上傳頭像/圖片并實時顯示到頁面的方法
今天小編就為大家分享一篇vue中使用axios post上傳頭像/圖片并實時顯示到頁面的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
緩存清除成為克服瀏覽器緩存中過時內容挑戰(zhàn)的關鍵技術,術語“緩存清除”是指故意使靜態(tài)資源失效或進行版本控制,迫使瀏覽器在發(fā)生更改時獲取新資源,本文給大家介紹了Vue如何清除緩存,需要的朋友可以參考下2023-12-12