Javascript 函数不在Vue生命周期挂钩上加载，但在使用V-on调用时加载

我遇到了一个问题，

mounted

无法运行提供的功能。我刚刚填充了数组来说明它的结构。实际上，它从连接到后端的

创建的
实例接收所有数据

   new Vue({
el: '#app',
data() {
    return {
        products: [{
            "_id": "150",
            "name": "Milk",
            "description": "Skimmed",
            "price": "10",
            "ratings": [{
                    "email": "xyz@mail.com",
                    "rating": "5"
                },
                {
                    "email": "abc@mail.com",
                    "rating": "3"
                },
                {
                    "email": "def@mail.com",
                    "rating": "1"
                },
            ]
        }]
    }
},
created() {
    fetch('http://localhost:3000/api/products')
        .then(res => res.json())
        .then(json => this.products = json)
},


mounted() {
    // mapping each item of products to merge averageRating calculated
    this.products = this.products.map(product => {
        // ratings summation
        const totalRatings = product.ratings.reduce((acc, {
            rating
        }) => acc += Number(rating), 0)
        const averageRating = totalRatings / product.ratings.length
        // returning the merge of the current product with averageRating
        return {
            ...product,
            averageRating
        }
    })
}
})

created
接收所有没有问题的产品。问题是
装载的
实例应该计算所有产品评级的平均值，并将其存储在
this.products
中。我使用
name:{{product.name}，averageRating:{{{product.averageRating}
来显示产品及其在HTML上的排名

但这并没有发生。它几乎像是跳过了
挂载的
位。奇怪的是，当我用

我不知道会出什么问题。没有错误。我已尝试将其链接到
创建的
实例中的
.then（）
。我需要此函数自动运行，而无需按下按钮。我还尝试使用各种其他生命周期挂钩，如
在装载前

我也试过了

mounted() {

    this.getAverage()

    }

任何帮助都将不胜感激。提前谢谢

问题是装载的实例应该计算所有产品评级的平均值，并将其存储在this.products中

不应该这样做，因为远程获取的数据在
挂载
运行时尚未准备就绪。相同的函数在click handler中工作，因为它在数据准备就绪时异步运行

问题与类似，解决方案也类似。应将其重写为（
然后将
替换为
async..wait
语法糖以提高可读性）：

使用
created
来处理异步副作用是不正确的，主要是因为它们不希望在这个生命周期挂钩结束时完成，这是一个常见的问题。这与React的
componentWillMount
和
componentDidMount
生命周期挂钩非常相似，前者经常被误用于异步我们的副作用，因此不推荐。
Hi！，可能创建和装载之间的时间小于获取时间，因此，装载的工作可能不正常，我怎么能延迟它呢？我之前尝试过setTimeout，但我认为我没有正确实现它。我想将它链接到
。然后
会使它在
t之后运行他的.products
已填充。可能我错了。请尝试在已装载的实例中提取，然后在“then”中放入getAverage的代码，我的意思是，在已装载的实例中执行所有操作谢谢。
mounted() {

    this.getAverage()

    }

async mounted() {
    const res = await fetch('http://localhost:3000/api/products');
    const json = await res.json();
    this.products = json;
    this.products = this.products.map(...)
}