Vue异步获取Firebase数据仅VS Code保存时UI才正常渲染问题

问题和Vue响应式本身无关，出在getUsersWithPoints方法的异步逻辑写法错误：

• 你在usersSnap.forEach中传入了async回调函数，但原生forEach不会等待内部异步任务执行，当代码执行到return users时，遍历每个用户拉取任务、计算积分、向数组push数据的逻辑还没跑完，实际返回给组件created钩子的是空数组。
• 后续内部异步任务陆续完成，会直接往已经赋值给this.items的空数组里push数据，这种直接修改数组成员的操作在Options API的响应式检测逻辑里没有被捕获，不会触发页面重渲染。
• 你在Vue Devtools中看到正确数据，是因为Devtools读取数据存在延迟，会拿到异步任务全部执行完成后的数组状态；修改代码触发热更新时，开发服务器会强制组件重新渲染，所以此时内容能正常显示。
• 之前测试mock数据、加固定延迟返回假数据能正常工作，是因为这两种场景返回的都是构造完成的完整数组，给this.items赋值时Vue能正常检测到数据变更，触发渲染。

不要用forEach处理需要等待的异步逻辑，改用Promise.all等待所有用户的积分计算任务全部完成，拿到构造好的完整数组后再返回，保证给this.items赋值时拿到的是完整数据，Vue可以正常检测变更触发渲染。
修复后的请求方法代码如下：

async function getUsersWithPoints(){
    const usersQuery = query(collection(db, `groups/${wgKey}/users`));
    const usersSnap = await getDocs(usersQuery);
    // 为每个用户生成拉取任务、计算积分的异步Promise
    const userPromises = usersSnap.docs.map(async (userDoc) => {
        const tasksQuery = query(collection(db, `${userDoc.ref.path}/tasks`));
        const tasksSnap = await getDocs(tasksQuery);
        let points = 0;
        tasksSnap.forEach((task) => {
            points += task.data().points;
        });
        return {
            username: userDoc.data().name,
            points: points,
            id: userDoc.id
        };
    });
    // 等待所有用户数据处理完成，拿到完整数组再返回
    const users = await Promise.all(userPromises);
    return users;
}

补充：如果后续遇到数组直接通过索引修改、调用push/pop等方法不触发渲染的场景，也可以用this.$set或者数组splice方法手动触发响应式更新，但本次问题核心是异步逻辑写法错误，优先修正异步逻辑即可。

内容的提问来源于stack exchange，提问作者Marcel Mayr