場景:獲取接口數(shù)據(jù)凛虽,更新dom
問題:數(shù)據(jù)更新了死遭,dom未渲染
代碼:
this.row[index] = []
原因:
vue的dom更新是異步的,即當setter操作發(fā)生后凯旋,指令并不會立馬更新呀潭,指令的更新操作會有一個延遲,當指令更新真正執(zhí)行的時候至非,此時.text屬性已經(jīng)賦值钠署,所以指令更新模板時得到的是新值。
具體流程如下:
1.self.dataObj = {};發(fā)生setter操作
2.vue監(jiān)測到setter操作荒椭,通知相關(guān)指令執(zhí)行更新操作
3.self.dataObj[‘text’] = ‘new text’;賦值
4.指令更新開始執(zhí)行
Vue包裝了數(shù)個數(shù)組操作函數(shù)谐鼎,使用這些方法操作的數(shù)組去,其數(shù)據(jù)變動時會被vue監(jiān)測:
1.push()
2.pop()
3.shift()
4.unshift()
5.splice()
6.sort()
7.reverse()
8.vue2.0還增加個方法可以觀測Vue.set(items, indexOfItem, newValue)
9.filter(), concat(), slice() 趣惠。這些不會改變原始數(shù)組狸棍,但總是返回一個新數(shù)組。當使用非變異方法時味悄,可以用新數(shù)組替換舊數(shù)組
Vue 不能檢測以下變動的數(shù)組:
- 當你利用索引直接設(shè)置一個項時草戈,vm.items[indexOfItem] = newValue
- 當你修改數(shù)組的長度時,例如: vm.items.length = newLength
解決方法代碼:
this.row.splice(index, 1, [])
this.$set(this.form.arrs,model,'')