對(duì)象和數(shù)據(jù)的強(qiáng)制更新

數(shù)組更新

以下支持自動(dòng)更新

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

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

強(qiáng)制更新

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

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

對(duì)象更新

Vue 不能檢測(cè)對(duì)象屬性的添加或刪除：

強(qiáng)制更新

this.$set(this.obj, ‘a(chǎn)ge', 27)

參考鏈接 

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

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

對(duì)象類(lèi)型

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

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

數(shù)組類(lèi)型

這些不會(huì)改變?cè)紨?shù)組，但總是返回一個(gè)新數(shù)組。當(dāng)使用非變異方法時(shí)，可以用新數(shù)組替換舊數(shù)組。

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

vue不能檢測(cè)以下變動(dòng)的數(shù)組：

① 當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，vm.items[indexOfItem] = newValue

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

異步類(lèi)型

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

Vue.nextTick(callback)

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

強(qiáng)制更新

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

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

比如v-for里面數(shù)據(jù)層次太多， 修改過(guò)數(shù)據(jù)變了，頁(yè)面沒(méi)有重新渲染，需手動(dòng)強(qiáng)制刷新。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。 

最新評(píng)論