关于Vue中的axios数据异步 获取后，更改数据，页面没有更新

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/smalCat/article/details/85308396

列子

	//页面视图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)
          // 
        })
      })
    })
	

你发现，视图更新了，恭喜你，也恭喜我，对自己又一次加了一点汽油，让我们更好的奔跑吧