VUE：UI仅在我保存更改VS代码时才呈现数据

Question

我是Vue的新手，我正在为一个非常奇怪的问题苦苦挣扎： 在我的组件中，在creates（）函数中我获取数据并将其保存到我的项目数组中。我以V-For为段落显示项目的内容。

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

代码： 每周lylanking.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 Inspector显示数据如下：

我到目前为止尝试过的东西

• 直接在数据（）部分中直接使用假数据 - 作品。 UI显示了我在这里嘲笑的初始数据。

• 从数据源中获取虚假数据 - 也可以工作。在人工延迟后显示正确的数据。 在这种情况下，有趣的是，控制台日志中的数组看起来不同：

我无法理解这两个日志之间的差异，尤其是因为Vue Inspector显示它完全相同。同样，保存代码的零件对我来说也不重要。

下面我显示数据调用代码。我将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;
}
```

Answer 1

我记得几年前与VUE 2项目遇到了相同的问题。据我所知， valentin rapp 已经给了您正确的解释。文档还指出：

阵列突变器

vue能够检测何时称为反应阵列的突变方法

来源： https://vuejs.s.s.org/指南/essexents/list.html＃array-change-detection

一种可能的解决方案是将产生的元素推向反应性阵列，因此触发是突变器。

    // ...
    created (){
        getUsersWithPoints().then((users) => {
            users.forEach(user => {
                this.items.push(user)
            })
            console.log('Users:', this.items)
        })
    },
    // ...

对象突变器

根据用户阵列的大小（＆gt; 10k）的大小这种方法在某些设备上可能会滞后/非常缓慢。另一种方法是，通过更新对象道具来使用对象的反应性突变器。请注意，我尚未使用VUE 3选项API使用，因此这可能是错误的：

    // ...
    data() {
        return {
            user: {
                items: [],
                loaded: false, // can be used for some loading animation
            },
        }
    },
    created (){
        getUsersWithPoints().then((users) => {
            this.user.items = users
            this.user.loaded = true
            console.log('Users:', this.user.items)
        })
    },
    // ...

组成API

如前所述的 ，并可能导致

    // Vue 3 Component with Composition API — not a 1:1 approach!
    // ...
    setup() {
        const items = ref([])

        getUsersWithPoints().then((users) => {
            users.forEach(user => {
                this.items.push(user)
            })
        })

        return {
            items,
        }
    },
    // ...

VS代码保存错误

此“错误”更可能是上述问题的确认：突变器。然而，您给定的描述几乎没有给您一些详细信息。

我们不知道“存储在Vscode”之间的整个工具链如何将新代码带入浏览器”。您的代码如何被转移？如何观看文件？如何实现热重载？

但是总的来说，我认为这会像这样工作：

1. 文件存储在您的编辑器中，
2. 您的工具链观察器检测一个更改的文件hash for一个js文件
3. 您的工具链transpiles transpiles transpiles transpiles
4. transpiles您的热加载服务将重新加载并注入新的代码
5. 中，为了在浏览器实例中同步您的当前数据和热封装组件中的默认数据将被正确替换为VUES突变器的使用。
6. 您的组件将正确检测到更改。您的v-for get rerendered且数据将正确显示，

但正如我所说，这是纯粹的猜测，纯粹取决于您的设置。

Answer 2

因此，我尝试了多个方法来修复它：

• 使用数组突变器切换到组成API
• ，而不是
• 使用异步替换数组 - 等待那时（不幸的是）

，不幸的是，这都没有解决问题。因此，我更深入地研究了getuserswithpoints的功能，以找到我认为是错误的东西：
将foreach与异步函数一起使用。
使用Promise.All修复了问题。这是代码：

async function getUsersWithPoints(){
    let usersExtended = new Array();
    const usersQuery = query(collection(db, `groups/${wgKey}/users`));
    const usersSnap = await getDocs(usersQuery);

    await Promise.all(usersSnap.docs.map(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;
        });
        usersExtended.push({
            username: user.data().name,
            points: points,
            id: user.id
        });
    }));


    return usersExtended;
}

使用数组突变器似乎是一件合乎逻辑的事情，尽管文档说：

使用非熔化方法时，我们应该用新数组替换旧数组
...
您可能会认为这会导致Vue丢弃现有的DOM并重新渲染整个列表 - 幸运的是，事实并非如此。 vue实现了一些智能启发式学以最大化DOM元素重复使用，因此用一个包含重叠对象的另一个数组替换数组是一个非常有效的操作。

来源： https://vuejs.s.s.org/guide/guide/essentials/essentials/list。 html＃阵列变更 - 检测

据我了解，替换数组不会重新渲染整个 dom，但Vue使用“智能启发式”来使替换阵列非常有效。因此，现在我修复了我尝试替换和使用数组突变器的数据调用，并且都起作用。

Answer 3

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

https：// vuejs。 org/guide/ensexents/list.html＃array-change-detection

您需要将数据推到数组。修改和清除它使用剪接。

在VUE 3中，您将不再需要处理。