vue中，data定义的数组是如何实现响应式的，结合实例反映对源码的理解程度。

下面是我项开发中的一个例子。

说明：已知data中定义了List:[]，getDownloadRecord、getWorkDetail均是Promise请求，现在发现getDownloadRecord返回的数组A的每条数据属性太少了，现在想在数组A的每条数据上加一个work对象属性，这个对象通过getWorkDetail获取。那么如何保证最后的List数组是响应式的(⊙o⊙)?

答：获取A后，对其遍历用getWorkDetail加work属性，将每次遍历的异步存储下来，通过await Promise.all(arr)等待全部的请求完成，这时候再将A加到this.List.身上：this.List.push(…A)。如果不使用await等待异步完成就去this.List.push(…A)，最后this.List.身上的work属性就不是响应式的。因为根据事件循环机制，同步代码先被执行，然后再异步，在同步代码执行过程中已经完成了对List的响应式处理，等到异步拿到结果时，就新来的work属性就错过了成为响应式数据的时机。

错误实例1

    // 获取更多
    async getMore () {
      let res = await getDownloadRecord({
        uuid: this.$store.getters.get_uuid,
        limit: 5,
        page: this.Num++
      })
      if (res.data[0].length === 0) {
        return this.$message({
          type: 'warning',
          message: '数据已经加载完毕！'
        })
      }
      console.log('---this.List-res---', res)
      let arr = []
      res.data[0].forEach(i => {
        getWorkDetail(i.workId).then(res => {
          // 等到this.List.push(...res.data[0])执行完的时候，这里的才开始赋值。
          i.work = res.data
        })
        // arr.push(getWorkDetail(i.workId).then(res => {
        //   i.work = res.data
        // }))
      })
      // await Promise.all(arr)
      console.log('--this.List---res.data[0]-----', res.data[0])
      this.List.push(...res.data[0])
      console.log('--this.List--------', this.List)
    }

错误实例2.

    // 获取更多
    async getMore () {
      let res = await getDownloadRecord({
        uuid: this.$store.getters.get_uuid,
        limit: 5,
        page: this.Num++
      })
      if (res.data[0].length === 0) {
        return this.$message({
          type: 'warning',
          message: '数据已经加载完毕！'
        })
      }
      过早给List“赋值”了
      this.List.push(...res.data[0])
      console.log('---this.List-res---', res)
      let arr = []
      res.data[0].forEach(i => {
        // getWorkDetail(i.workId).then(res => {
        //   i.work = res.data
        // })
        arr.push(getWorkDetail(i.workId).then(res => {
          i.work = res.data
        }))
      })
      await Promise.all(arr)
      console.log('--this.List--------', this.List)
    }

以下代码，是正确的写法：

    // 获取更多
    async getMore () {
      let res = await getDownloadRecord({
        uuid: this.$store.getters.get_uuid,
        limit: 5,
        page: this.Num++
      })
      if (res.data[0].length === 0) {
        return this.$message({
          type: 'warning',
          message: '数据已经加载完毕！'
        })
      }
      console.log('---this.List-res---', res)
      let arr = []
      res.data[0].forEach(i => {
        // getWorkDetail(i.workId).then(res => {
        //   i.work = res.data
        // })
        arr.push(getWorkDetail(i.workId).then(res => {
          i.work = res.data
        }))
      })
      await Promise.all(arr)
      console.log('--this.List---res.data[0]-----', res.data[0])
      this.List.push(...res.data[0])
      console.log('--this.List--------', this.List)
    }