列子
//页面视图HTML
<span>{{test[0].ress}}</span>
// 数据请求
this.axios.get('/list/1').then(res => {
// 得到数据
this.test = res.data.data
// 对数据批量更改
this.test.map((val, index) => {
this.axios.get('/list/2').then(res => {
val.ress = res.data.data[0].name
this.test.push(val)
})
})
})
// 发现console.log(this.test) 数据得到了更改
// 但是页面数据并没有刷新
//尝试 watch 监听test数据,然后等待DOm更新
watch: {
test (val) {
this.$nextTick(() => {
this.test = val
})
}
}
// 失败,发现,依然是console.log(this.test,val) ress 都存在,但是视图依然没有更新
解决
这里特别声明一下vue的数据更新方式,对于数组,vue只会在使用Array的原生方法更改数据后,才会更新视图而对于上面 val.ress = res.data.data[0].name
这样直接对this.test的子对象更改数据,并不会触发vue的响应更新
机制,因为vue的监听对象压根就不监听 这样的赋值方式
,查资料,网上找解决办法,终于眼前一亮
1.Vue只能使用如下数组方法,才能响应式更新视图:
push
pop
shift
unshift
splice
sort
reverse
// 这下明白了为什么视图没有响应更新
// 然后开始解决问题
this.axios.get('/list/1').then(res => {
// 首先我这里就不用声明的test来取值,新建一个data来获取请求回来的数据
let data = res.data.data
// 然后批量处理数据,使用了map,你也可以使用forEach,看个人
data.map((val, index) => {
// 这里第二次请求更新data中的某一项值或者新增某一项
this.axios.get('/list/2').then(res => {
// 新增ress
val.ress = res.data.data[0].art_name
// 赋值完毕后,加入我们在vue中声明的this.test数组
// 这个时候,vue监听对象监听到this.test使用了push方法,开始响应更新页面数据,
this.test.push(val)
//
})
})
})
你发现,视图更新了,恭喜你,也恭喜我,对自己又一次加了一点汽油,让我们更好的奔跑吧