使用 Vue 3 Composition API 在花括号中显示加载的数据

Question

有人能解释一下下面的区别吗？

选项 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 函数中控制台记录新数据），但我在文档中看不到任何内容来指示如何批量-像这样更新一个响应式对象（尤其是当它在 Options API 中工作时）

编辑：最后的想法：

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

示例：

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>`
}

Answer 1

我认为如果您要覆盖整个配置，您应该使用ref 而不是reactive。 见HERE

  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,
    };
}

Answer 2

我认为您提到的两个示例之间的区别是this 关键字。根据Vue 3 documentation，在 setup() 内部，this 不会是对当前活动实例的引用。因此，在您提到的第二个代码（组合 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>