Vue中一个计算属性依赖了一个异步请求的数据，数据请求完成数据更新了但是视图没更新。

Question

RecordModel.ts //数据模块

import axios from 'axios'

type recordModel = {
    RecordList: RecordItem[]
    getRecord: () => {}
}

const RecordModel:recordModel = {
    RecordList:[],
    async getRecord(){
        await axios.get('http://xxxx').then((response)=>{
            this.RecordList = response.data.vuedata
        })
    }
}

async function getRecordModel(){
    await RecordModel.getRecord()
    return RecordModel
}

export {getRecordModel}

showRecord.vue //视图

<template>
<div>{{recordList}}</div>
</template>
<script lang="ts">
export default class ShowRecord extends Vue {
    //计算属性 ts 写法 
    get recordList(){
        const hash:{[key:string]:RecordItem[]} = {}
        getRecordModel().then((result:any)=>{
            result.RecordList.forEach((record:RecordItem[])=>{
                const key = record.date
                if(!(key in hash)){
                    this.$set(hash,key,[])
                }
                hash[key].push(record)
            })
        })
        console.log(hash) //空对象
        setTimeout(()=>{
            console.log(hash) //有数据 但是视图没有更新
        },1000)
        return hash
    }
}

</script>

Answer 1

不明白你这个为什么要用计算属性呢，计算属性的话应该会时常读取这个属性，那就会多次执行这个异步函数。读取的时候由于hash是异步获取的，所以hash返回的还是初始值{}

Answer 2

为什么要在计算属性里边写异步？Promise的.then会在最后执行，会先 return 出来空集合。

可以看下 Promise 的执行顺序

Answer 3

在Vue官方文档中提到， 由于 JavaScript 的限制， 当你利用索引直接设置一个项，或者直接改变数组的长度时，Vue将不会检测到数据的变化。watcher没有监测到，从而不能引发视图的重新渲染。