vue對(duì)象或者數(shù)組中數(shù)據(jù)變化但是視圖沒有更新問題及解決
vue對(duì)象或數(shù)組中數(shù)據(jù)變化但視圖沒更新
由于 JavaScript 的限制，Vue 不能檢測(cè)數(shù)組和對(duì)象的變化。
但是我們還是有一些辦法來回避這些限制并保證它們的響應(yīng)性。
一、對(duì)于對(duì)象
**Vue 無法檢測(cè) property 的添加或移除。
由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì) property 執(zhí)行 getter/setter 轉(zhuǎn)化，所以 property 必須在 data 對(duì)象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的。
例如：
var vm = new Vue({
data:{
a:1
}
})
// `vm.a` 是響應(yīng)式的
vm.b = 2
// `vm.b` 是非響應(yīng)式的對(duì)于已經(jīng)創(chuàng)建的實(shí)例，Vue 不允許動(dòng)態(tài)添加根級(jí)別的響應(yīng)式 property。
但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套對(duì)象添加響應(yīng)式 property。
例如，對(duì)于：
Vue.set(vm.someObject, 'b', 2)
您還可以使用 vm.$set 實(shí)例方法，這也是全局 Vue.set 方法的別名：
this.$set(this.someObject,'b',2)
有時(shí)你可能需要為已有對(duì)象賦值多個(gè)新 property，比如使用 Object.assign() 或 _.extend()。
但是，這樣添加到對(duì)象上的新 property 不會(huì)觸發(fā)更新。
在這種情況下，你應(yīng)該用原對(duì)象與要混合進(jìn)去的對(duì)象的 property 一起創(chuàng)建一個(gè)新的對(duì)象。
// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })二、對(duì)于數(shù)組
Vue 不能檢測(cè)以下數(shù)組的變動(dòng)：
- 當(dāng)你利用索引直接設(shè)置一個(gè)數(shù)組項(xiàng)時(shí)，例如：
vm.items[indexOfItem] = newValue
- 當(dāng)你修改數(shù)組的長度時(shí)，例如：
vm.items.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í)現(xiàn)和 vm.items[indexOfItem] = newValue 相同的效果，同時(shí)也將在響應(yīng)式系統(tǒng)內(nèi)觸發(fā)狀態(tài)更新：
// Vue.set Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)
你也可以使用 vm.$set 實(shí)例方法，該方法是全局方法 Vue.set 的一個(gè)別名：
vm.$set(vm.items, indexOfItem, newValue)
為了解決第二類問題，你可以使用 splice：
vm.items.splice(newLength)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue render函數(shù)實(shí)戰(zhàn)之實(shí)現(xiàn)tabs選項(xiàng)卡組件
這篇文章主要介紹了Vue render函數(shù)實(shí)戰(zhàn)之實(shí)現(xiàn)tabs選項(xiàng)卡組件的相關(guān)知識(shí)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
本文主要介紹了Vue?h函數(shù)的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
vue Treeselect 樹形下拉框:獲取選中節(jié)點(diǎn)的ids和lables操作
這篇文章主要介紹了vue Treeselect 樹形下拉框:獲取選中節(jié)點(diǎn)的ids和lables操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
在Vue.js中,頁面跳轉(zhuǎn)是構(gòu)建單頁面應(yīng)用（SPA）的基本操作之一,本文將介紹Vue中實(shí)現(xiàn)頁面跳轉(zhuǎn)的幾種方法,并通過實(shí)例代碼幫助理解每種方法的用法,需要的朋友可以參考下2024-09-09
這篇文章主要介紹了Vue實(shí)現(xiàn)驗(yàn)證碼登錄全過程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
這篇文章主要為大家介紹了在Vue中實(shí)現(xiàn)組件切換的三種方法,即使用條件渲染,使用動(dòng)態(tài)組件以及通過點(diǎn)擊按鈕切換組件,有需要的小伙伴可以了解下2024-11-11
vue組件傳值(高級(jí))、屬性傳值、反向傳值、跨級(jí)傳值實(shí)例詳解
父組件通過屬性傳值給子組件，父組件修改數(shù)據(jù)后會(huì)刷新頁面并重新傳值給子組件，子組件可以修改父組件傳的值并刷新自己的頁面?但是并不會(huì)修改父組件中的值，這篇文章主要介紹了vue組件傳值（高級(jí)）、屬性傳值、反向傳值、跨級(jí)傳值,需要的朋友可以參考下2022-09-09
vue實(shí)現(xiàn)進(jìn)入全屏和退出全屏的示例代碼
最近一個(gè)項(xiàng)目需要進(jìn)行大屏展示,所以登錄完就要處于一個(gè)全屏的狀態(tài),本文主要介紹了vue實(shí)現(xiàn)進(jìn)入全屏和退出全屏的示例代碼,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
Vue表單數(shù)據(jù)修改與刪除功能實(shí)現(xiàn)
本文通過實(shí)例代碼介紹了Vue表單數(shù)據(jù)修改與刪除功能實(shí)現(xiàn),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友跟隨小編一起看看吧2023-10-10
這篇文章主要介紹了vue?數(shù)組添加數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08