Vue在子发射时在父组件中执行异步更新

Question

我有一个使用各种图表子组件显示数据的组件，为此，我想在父组件中对chartdata进行客户端过滤。我有另一个处理过滤的子组件，当应用过滤器时，它将向父对象发送一个事件，父组件将重新计算数据并将其发送到图表子组件。

当前，当应用过滤器时，重新计算花费的时间太长，并且UI冻结，我正试图摆脱它。

这是当前外观的伪类代码示例：

export default {
    name: "reportingView",
    components: {
        chartA,
        chartB,
        filtering
    },
    data() {
        return {
            chartAData, //used as prop to chartA
            chartBData //used as prop to chartA
        }
    },
    methods: {
        filterChangedEvent(e) {
            this.calculateChartData()
        },
        async calculateChartData() {
            //Calculate data and update chartAData and chartBData
            console.log("calculation done");
        }
    },
    updated() {
        console.log("parent updated");
    }
}

export default {
    name: "filtering",
    data() {
        return {
            appliedFilters
        }
    }
    methods: {
        filterChanged() {
            this.this.$emit("filterChanged", this.appliedFilters);
        }
    }
    updated() {
        console.log("child updated");
    }
}

我希望过滤器组件在完成后立即重新呈现，然后将更改发送给父组件，然后父组件应重新计算数据异步，然后在完成后重新呈现UI。

我希望日志为： “孩子翻了个身” “计算完成” “父级已更新”

但是我越来越 “计算完成” “孩子已更新” “父级已更新”，并且用户界面在计算过程中被冻结

当孩子发出事件时，如何在父中实现异步更新？