對象和數(shù)據(jù)的強制更新

數(shù)組更新

以下支持自動更新

• push() //向后添加
• pop() //刪除最后一個
• shift() //刪除第一個
• unshift() //向第一個添加元素
• splice() //向指定位置添加/刪除元素
• sort() //用原地算法對數(shù)組的元素進行排序
• reverse() //將數(shù)組中元素的位置顛倒

注意，這種形式修改數(shù)據(jù) this.arr[1] = ‘x’ // 不是響應性的，這種情況，可以采用splice方法修改數(shù)據(jù)即可實現(xiàn)更新

強制更新

this.$set(數(shù)組，下標，修改后的值)

eg:this.$set(this.dataArr,1,{})

對象更新

Vue 不能檢測對象屬性的添加或刪除：

強制更新

this.$set(this.obj, ‘age', 27)

參考鏈接 

更新數(shù)據(jù)并強制更新視圖

在開發(fā)過程中，有時發(fā)現(xiàn)當數(shù)據(jù)變動后，視圖并未更新。那么下面是一些常見示例的和解決辦法

對象類型

當對象為引用類型，vue不一定能監(jiān)控到 所以當我們新建一個對象并賦值給oldObj字段的話，直接改變了它的指向地址=====》對象和數(shù)組都能用的方法：

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

數(shù)組類型

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

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

vue不能檢測以下變動的數(shù)組：

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

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

異步類型

可在數(shù)據(jù)變化之后立即使用 

Vue.nextTick(callback)

這樣回調函數(shù)在 DOM 更新完成后就會調用。

強制更新

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

vue多層循環(huán)，動態(tài)改變數(shù)據(jù)后渲染的很慢或者不渲染。

比如v-for里面數(shù)據(jù)層次太多， 修改過數(shù)據(jù)變了，頁面沒有重新渲染，需手動強制刷新。

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。 

最新評論