场景:获取接口数据,更新dom
问题:数据更新了,dom未渲染
代码:
this.row[index] = []
原因:
vue的dom更新是异步的,即当setter操作发生后,指令并不会立马更新,指令的更新操作会有一个延迟,当指令更新真正执行的时候,此时.text属性已经赋值,所以指令更新模板时得到的是新值。
具体流程如下:
1.self.dataObj = {};发生setter操作
2.vue监测到setter操作,通知相关指令执行更新操作
3.self.dataObj[‘text’] = ‘new text’;赋值
4.指令更新开始执行
Vue包装了数个数组操作函数,使用这些方法操作的数组去,其数据变动时会被vue监测:
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() 。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组
Vue 不能检测以下变动的数组:
- 当你利用索引直接设置一个项时,vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如: vm.items.length = newLength
解决方法代码:
this.row.splice(index, 1, [])
this.$set(this.form.arrs,model,'')