Vue響應(yīng)式添加、修改數(shù)組和對(duì)象的值
有些時(shí)候，不得不想添加、修改數(shù)組和對(duì)象的值，但是直接添加、修改后又失去了getter、setter。
由于 JavaScript 的限制， Vue 不能檢測(cè)以下變動(dòng)的數(shù)組：
1. 利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如： vm.items[indexOfItem] = newValue
2. 修改數(shù)組的長(zhǎng)度時(shí)，例如： vm.items.length = newLength
為了避免第一種情況，以下兩種方式將達(dá)到像 vm.items[indexOfItem] = newValue 的效果， 同時(shí)也將觸發(fā)狀態(tài)更新：
// Vue.set Vue.set(example1.items, indexOfItem, newValue) // Array.prototype.splice` example1.items.splice(indexOfItem, 1, newValue)
避免第二種情況，使用 splice：
example1.items.splice(newLength)
Vue 不允許在已經(jīng)創(chuàng)建的實(shí)例上動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性(root-level reactive property)。然而它可以使用Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對(duì)象上：
Vue.set(vm.someObject, 'b', 2)
您還可以使用 vm.$set 實(shí)例方法，這也是全局 Vue.set 方法的別名：
this.$set(this.someObject,'b',2)
有時(shí)你想向已有對(duì)象上添加一些屬性，例如使用 Object.assign() 或 _.extend() 方法來添加屬性。但是，添加到對(duì)象上的新屬性不會(huì)觸發(fā)更新。在這種情況下可以創(chuàng)建一個(gè)新的對(duì)象，讓它包含原對(duì)象的屬性和新的屬性：
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
this.someObject = _.extend({ a: 1, b: 2 }, this.someObject)
示例代碼:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<ol>
<li v-for="data in list">{{data.id}} - {{data.name}}</li>
</ol>
</div>
<script type="text/javascript" src="../underscore/underscore-min.js"></script>
<script type="text/javascript" src="./vue.2.1.8.min.js"></script>
<script type="text/javascript">
var oVue = new Vue({
el : '#app',
data : {
list : [
{id : 5},
{id : 6}
]
}
});
</script>
</body>
</html>
以上就是VueI添加修改數(shù)組與對(duì)象值時(shí)同時(shí)將觸發(fā)狀態(tài)更新的方法，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue.js封裝switch開關(guān)組件的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
VUE?axios每次請(qǐng)求添加時(shí)間戳問題
這篇文章主要介紹了VUE?axios每次請(qǐng)求添加時(shí)間戳問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了vue-plugin-hiprint 詳細(xì)使用說明,使用Vue.Draggable庫構(gòu)建可拖拽元素的示例,你可以根據(jù)具體需求和技術(shù)選型選擇適合的庫或方法來實(shí)現(xiàn)可拖拽元素的功能,需要的朋友可以參考下2023-08-08
Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的方法
這篇文章主要介紹了Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的方法,結(jié)合實(shí)例形式分析了Vue.extend實(shí)現(xiàn)掛載到實(shí)例上的具體操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-05-05
vue.js單頁面應(yīng)用實(shí)例的簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要介紹了vue.js單頁面應(yīng)用實(shí)例的簡(jiǎn)單實(shí)現(xiàn)，使用單頁應(yīng)用，沒有頁面切換，就沒有白屏阻塞，可以大大提高 H5 的性能，達(dá)到接近原生的流暢體驗(yàn)。2017-04-04
這篇文章主要介紹了Vue使用swiper問題(5.2.0版本,避免踩坑)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue Element前端應(yīng)用開發(fā)之echarts圖表
在我們做應(yīng)用系統(tǒng)的時(shí)候，往往都會(huì)涉及圖表的展示，綜合的圖表展示能夠給客戶帶來視覺的享受和數(shù)據(jù)直觀體驗(yàn)，同時(shí)也是增強(qiáng)客戶認(rèn)同感的舉措之一2021-05-05
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)時(shí)間軸功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
Vue + Element UI 實(shí)現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實(shí)現(xiàn)代碼
菜單管理是一個(gè)對(duì)菜單樹結(jié)構(gòu)的增刪改查操作，這篇文章主要介紹了Vue + Element UI 實(shí)現(xiàn)權(quán)限管理系統(tǒng)之菜單功能實(shí)現(xiàn)代碼,需要的朋友可以參考下2022-02-02
前端的數(shù)據(jù)均是通過接口請(qǐng)求拿到的，而Vue本身不支持ajax請(qǐng)求，那么該怎么解決Vue中的異步請(qǐng)求呢？這兒提供了幾種方法，希望對(duì)大家有所幫助2022-05-05