有人可以解釋以下之間的區別嗎？
選項 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 中作業）
uj5u.com熱心網友回復：
我認為如果您要覆寫整個配置，您應該使用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,
};
}
uj5u.com熱心網友回復：
我認為您提到的兩個示例之間的區別在于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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/406894.html
標籤：
上一篇：自定義多選和單選問題
下一篇：通過vue中的計算屬性過濾資料