使用 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 函数中控制台记录新数据）但我在文档中看不到任何内容指示如何像这样批量更新反应对象（尤其是当它在选项 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>

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

Show loaded data in curly braces using Vue 3 Composition API

vue.js

vuejs3

vue-composition-api

vue-options-api