Vue響應(yīng)式添加、修改數(shù)組和對(duì)象的值
有些時(shí)候，不得不想添加、修改數(shù)組和對(duì)象的值，但是直接添加、修改后又失去了getter、setter。
米易網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、成都響應(yīng)式網(wǎng)站建設(shè)公司等網(wǎng)站項(xiàng)目制作，到程序開發(fā)，運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)2013年開創(chuàng)至今到現(xiàn)在10年的時(shí)間，我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn)，來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)。
由于 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() 方法來(lái)添加屬性。但是，添加到對(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í)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持創(chuàng)新互聯(lián)！
當(dāng)前標(biāo)題：Vue響應(yīng)式添加、修改數(shù)組和對(duì)象的值
本文地址：http://chinadenli.net/article46/pgjehg.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營(yíng)銷推廣、軟件開發(fā)、網(wǎng)站改版、標(biāo)簽優(yōu)化、網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
