vue中數據改變，強制視圖更新，視圖不更新的原因和解決辦法

一、更改 obj

原理：對象是引用類型，vue不一定能監控到 所以當我們新建一個對象並賦值給oldObj字段的話，直接改變了它的指向地址

oldObj = Object.assign({},newObj);

對象和數組都能用的

this.$set(this,'oldArray',newArray);
this.$set(this,'oldObj',newObj);
this.$set(this.some.name,‘b’,2)　

二、array

這些不會改變原始數組，但總是返回一個新數組。當使用非變異方法時，可以用新數組替換舊數組。

push()，pop()，shift()，unshift()，splice()，sort()，reverse()可被vue檢測到 ，filter(), concat(), slice() 。

 

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

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

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

三、使用update

this.$forceUpdate()，強制視圖更新 

vue多層循環，動態改變數據后渲染的很慢或者不渲染。

 

四、異步更新隊列

解決辦法：可在數據變化之后立即使用 Vue.nextTick(callback) 。這樣回調函數在 DOM 更新完成后就會調用。