1

有人可以解释以下之间的区别吗？

选项 API 版本

按预期在 DOM 中显示加载的数据

export default {
    data() {
        return {
            config: {},
        };
    },
    async mounted() {
        this.config = await fetch('/path/to/file.json');
    },
    template: `<div>{{ config }}</div>`
}

组合 API 版本

显示配置的初始状态，但不显示加载的数据

import { onMounted, reactive } from 'vue';

export default {
    setup() {
        let config = reactive({});

        onMounted(async () => {
            config = await fetch('/path/to/file.json');
        });

        return {
            config,
        };
    },
    template: `<div>{{ config }}</div>`
}

我怀疑它reactive()被异步数据加载覆盖（并且我可以控制台记录onMounted函数中的新数据）但我在文档中看不到任何内容来指示如何大规模更新这样的反应对象（尤其是当它在选项 API 中工作）

编辑：最后的想法：

我已经开始使用reactive对象在应用程序周围提供/注入数据，然后使用toRefsJIT 方式将反应数据提供给我的视图。这似乎是两全其美。

例子：

import { onMounted, reactive, toRefs } from 'vue';

export default {
    setup() {
        const data = reactive({
            config: {},
        });

        onMounted(async () => {
            data.config = await fetch('/path/to/file.json');
        });

        return {
            ...toRefs(data),
        };
    },
    template: `<div>{{ config }}</div>`
}
4

2 回答 2

1

我认为如果您要覆盖整个配置，您应该使用ref而不是reactive. 看这里

  setup() {
    let config = ref({});

    onMounted(async () => {
        config.value = await fetch('path/to/file.json');
    });

    return {
        config,
    };
}

无论如何，它也与反应式一起工作：

  setup() {
    let config = reactive({});

    onMounted(async () => {
        config.value = await fetch('path/to/file.json');
    });

    return {
        config,
    };
}
于 2022-01-07T12:06:48.283 回答
1

我认为您提到的两个示例之间的区别在于this关键字。根据Vue 3 文档，在 setup() 内部，这不会是对当前活动实例的引用。因此，在您提到的第二个代码（组合 API）中，您不能仅将“配置”字设置为获取过程的输出。最好key为您的对象设置一个工作。例如对我来说，这段代码可以正常工作：

<template>
    <div>{{ config }}</div>
</template>

<script>
import { onMounted, reactive } from 'vue';

export default {
    name: "configCompo",
    setup(props) {
        let config = reactive({});

        onMounted(
            async () => {
                console.log("mounted")
                let response = await fetch('https://jsonplaceholder.typicode.com/users');
                console.log(response);
                let data = await response.json();
                console.log(data);
                config.output = data;
            }
            

        );

        return {
            config,
        };
    }
}
</script>

于 2022-01-07T13:19:44.153 回答