Vue：当我在 VS Code 中保存更改时，UI 仅呈现数据答案

【问题标题】：Vue: UI only renders data when I save changes in VS CodeVue：当我在 VS Code 中保存更改时，UI 仅呈现数据
【发布时间】：2022-07-07 21:05:06
【问题描述】：

我是 Vue 的新手，我正在努力解决一个非常奇怪的问题：在我的组件中，在 create() 函数中，我获取数据并将它们保存到我的 items 数组中。我用 v-for 作为段落显示项目的内容。

现在奇怪的事情来了：当我启动应用程序时，什么都没有显示，尽管我可以在 Vue 开发工具中看到正确的数据存储在 items 数组中。当我刷新时，也会发生同样的情况。只有当我对代码进行更改并保存时，我才能看到 UI 中显示了正确的数据。

代码： WeeklyRanking.vue：

<script>
import { computed } from "vue"
import RankingItem from "./RankingItem.vue";
import {getUsersWithPoints} from "../../../data/data";

    export default {
    name: "WeeklyRanking",
    data() {
        return {
            items: [],
        };
    },
    created (){
        getUsersWithPoints().then((users) => {
            this.items = users;
            console.log(users);
        });
    },
    computed: {
        sortedRankings() {
            return [...this.items].sort((a, b) => b.points - a.points);
        },
        maxPoints() {
            return 95;
        }
    },
    components: { RankingItem },
}  
</script>

<template>
    <div class="weekly-ranking-container">
            <h1>Wochen - Ranking</h1>
            <div class="ranking-chart">
                <p v-for="r in items"> {{r.username}} </p>
                {{items}}
            </div>
            <button>
                <router-link to="/taskDone">+ Aufgabe erledigt</router-link>
            </button>
    </div>
</template>

<style>
    .weekly-ranking-container{
        padding: 24px;
        max-width: 400px;
        min-width: 300px;
    }
    .ranking-chart{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
</style>

console.log 显示以下内容：

Vue 检查器显示数据如下：

到目前为止我已经尝试过什么

直接在 data() 部分使用假数据 - 有效。 UI 显示了我在这里模拟的初始数据。
使用虚假延迟从数据源获取虚假数据 - 也可以。在人为延迟后显示正确的数据。在这种情况下，有趣的是控制台日志中的 Array 看起来不同：

我无法理解这两个日志之间的区别，尤其是因为 Vue 检查器显示的内容完全相同。另外，保存代码的部分对我来说没有意义。

下面我展示了数据调用代码。我将 firebase 与模块化 api 一起使用。感谢您的帮助！

数据调用代码：

async function getUsersWithPoints(){
    // With the commented part it works
    // const fakeUsers = [
    //     {username:"Marcelo", points:95, id:"PRirMre5IUeHP7BA08wh"},
    //     {username:"Sebse", points:80, id:"PRirMasdoiHP7BA08wh"},
    //     {username:"Simi", points:20, id:"yhaHRRxN7PFmfyHZqZS1"},
    // ];
    // await new Promise(r => setTimeout(r, 2000));
    // console.log("FAKE USERS:");
    // console.log(fakeUsers);
    // return fakeUsers;

    //with the below part it does not
    let users = [];
    const usersQuery = query(collection(db, `groups/${wgKey}/users`));
    const usersSnap = await getDocs(usersQuery);
    usersSnap.forEach(async(user)=>{
        const tasksQuery = query(collection(db, `${user.ref.path}/tasks`));
        const tasks = await getDocs(tasksQuery);
        let points = 0;
        tasks.forEach((task)=>{
            points+=task.data().points;
        });
        users.push({
            username: user.data().name,
            points: points,
            id: user.id
        });
    });
    return users;
}
```

【问题讨论】：

您可以尝试使用 await 代替 .then() 吗？在第一种方法中，程序一直等待直到 promise 被解决（或被拒绝），而在第二种方法中，它只是继续前进，当 promise 被解决时，它在 then() 回调函数中执行代码。 Source

标签： javascript vue.js

【解决方案1】：

在您创建的生命周期挂钩中，您会覆盖反应式数据数组。这不会触发此处所述的更新：

https://vuejs.org/guide/essentials/list.html#array-change-detection

您需要将数据推送到数组。要修改和清除它，请使用 splice。

在 Vue 3 中，您将不再需要处理这个问题。

【讨论】：