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