vue 异步修改data中的值不生效

vue 异步修改data中的值不生效

今天在做vue项目的时候，由于用到了echart社区的官方图表，就小小的封装了一下，封装过后只需要传入一个数组数据就可以渲染出图表了，由于之前没有数据，我就在本地测试的时候传给了他一些默认数据，但是到后来对接接口的时候，这是数据是从后台哪里获取的，所以我需要从vue data中拿数据，然后传到函数中，问题就是出在这一步，你死活无法拿到vue data中更新后的值，你说气人不

这时会有人说，Vue是通过响应式系统修改，响应式系统会在初始化时对data进行监听，如果要修改data中的值，应该使用Vue提供的修改方法

this.$set(this.data, 'name', 'new value')

数组的话还可以这样修改

this.arr.splice(0,1,[])

不过你要知道该方法触发的时机，数据如果没有正确地绑定到模板中，那么即使使用了$set方法修改了data值，视图也不会发生变化。你可以通过在模板中使用{{}}或v-bind绑定数据，这样以确保数据能正确地渲染到视图中。才能准确地触发更新

相反如果数据没有进行绑定，你会发现不管你在哪里访问data,拿到的永远是之前的值，具体可以看下面这张图

其实呢要解决这个问题也简单，你只需要在返回一个promise就可以了，下面是一些具体实现方法

<script>
  export default {
    data() {
      return {
        arr:[
          [0,1,2,3],
          [1,2,3,4],
          [2,3,4,5],
        ]
      }
    },
      methods: {
        asyncfunc(){
           return new Promise((resolve, reject) => { 
              setTimeout(() => {
                this.$set(this.arr,0,[0,25])
                resolve()
              }, 5000);
            })
        }
      },
      mounted () {
        this.asyncfunc().then((result) => {
          console.log(this.arr[0],'值发生改变')
        })
      },
  }
</script>

这样你就可以拿到data中更新后的值啦！！！