Vue數據更新視圖不更新的幾種解決方案小結

Posted on by

Vue數據更新視圖不更新的幾種解決

知識拓展

在一個組件實例中，隻有在data裡初始化的數據才是響應的，Vue不能檢測到對象屬性的添加或刪除，沒有在data裡聲明的屬性不是響應的。

Vue不允許在已經創建的實例上動態添加根級響應式屬性，但是可以使用$set方法將相應屬性添加到嵌套的對象上。

數組數據變動，使用某些方法操作數組，變動數據時，有些方法無法被vue監測

push()，pop()，splice()，sort()，reverse()可被vue檢測到 filter(), concat(), slice()。這些不會改變原始數組，但總是返回一個新數組。當使用非變異方法時，可以用新數組替換舊數組。

vue不能檢測以下變動的數組：

1、當你利用索引直接設置一個項時，vm.items[indexOfItem] = newValue

2、當你修改數組的長度時，例如： vm.items.length = newLength

對象屬性的添加或刪除

由於 Vue 會在初始化實例時對屬性執行 getter/setter 轉化過程，所以屬性必須在 data 對象上存在才能讓 Vue 轉換它，這樣才能讓它是響應的。

解決辦法：

使用 Vue.set(object, key, value) 方法將響應屬性添加到嵌套的對象上

Vue.set(vm.someObject, 'b', 2) 或者 this.$set(this.someObject,'b',2) （這也是全局 Vue.set 方法的別名）

異步更新隊列

在最新的項目中遇到瞭這種情況，數據第一次獲取到瞭，也渲染瞭，但是第二次之後數據隻有在再一次渲染頁面的時候更新，並不能實時更新。

網上查瞭資料才知道，Vue 異步執行 DOM 更新。隻要觀察到數據變化，Vue 將開啟一個隊列，並緩沖在同一事件循環中發生的所有數據改變。如果同一個 watcher 被多次觸發，隻會被推入到隊列中一次。

解決辦法：

可在數據變化之後立即使用 Vue.nextTick(callback)。這樣回調函數在 DOM 更新完成後就會調用。例如：

因為 $nextTick()返回一個 Promise 對象，所以可以使用新的 ES2016 async/await語法完成相同的事情：

Object.assign方法

object.assign方法用於將所有可枚舉屬性的值從一個或多個源對象復制到目標對象，並返回目標對象。

vm.object = Object.assign( { } , vm.object , {a:' 1 ', b:' 2 ' })

註：object必須是已經聲明的對象

關於Object.assign方法更多內容，請訪問《Object.assign()》

vue多層循環

動態改變數據後渲染的很慢或者不渲染

可在動態改變數據的方法，第一行加上

this.$forceUpdate();

Vue更改瞭數據但是視圖卻沒有更新

1.Vue不能檢測到對象屬性的添加或刪除，沒有在對象裡聲明的屬性不是響應的。

2.用在v-for裡面數據層次太多，render函數沒有自動更新，需手動強制刷新

vm.$forceUpdate()

迫使 Vue 實例重新渲染。註意它僅僅影響實例本身和插入插槽內容的子組件，而不是所有子組件。

https://cn.vuejs.org/v2/api/#vm-forceUpdate

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：