這是我的 Vue3 應用代碼：
<template>
{{ names_data }}
</template>
<script>
import getData from "./composables/getData"
export default {
name: "App",
setup() {
var filenames = ["test1.json", "test2.json"];
const { names_data, error, load_data } = getData(
filenames
);
load_data();
console.log("names", names_data)
console.log("error", error)
return { names_data };
},
};
</script>
匯入的可組合函式如下：
import { ref } from "@vue/runtime-core";
const getData = (filenames) => {
const names_data = ref([])
const error = ref(null)
const load_data = async () => {
try {
var promises = [];
for (let i = 0; i < filenames.length; i ) {
var filename = filenames[i]
promises.push(
fetch(`data/${filename}`).then(
(res) => (res.ok && res.json()) || Promise.reject(res)
)
);
}
const data = await Promise.all(promises);
names_data.value = data
} catch (err) {
error.value = err.message;
console.log(error.value);
}
};
return { names_data, error, load_data }
};
export default getData
資料檔案包含以下內容：
測驗1.json
{
"members": {
"0": "Alice",
"1": "Bob",
"2": "Charlie"
}
}
測驗2.json
{
"members": {
"0": "David",
"1": "Elizabeth",
"2": "Fred"
}
}
這一切都有效：我可以names_data從螢屏上顯示的模板中看到。但是在控制臺中names_data顯示如下：
RefImpl {_shallow: false, dep: undefined, __v_isRef: true, _rawValue: Array(0), _value: Proxy} dep: Set(1) {ReactiveEffect} __v_isRef: true _rawValue: (2) [{…}, {…} ] _shallow: false _value: Proxy {0: {…}, 1: {…}} value: (…) [[Prototype]]: Object
我希望能夠訪問其中的值以names_data進行進一步處理，例如將它們放入表中，但是當我console.log(names_data.value)在應用程式中執行此操作時，我將 Proxy 物件設定為空陣列。我認為該names_data物件會以某種方式失去反應性，因為它在load_data()被呼叫時沒有更新。但它顯然在模板中是反應性的。所以我對這里發生的事情感到困惑。
如何訪問 ref 的值以進一步處理它？
uj5u.com熱心網友回復：
它按預期作業。如果不使用反應性，這將導致這種流行的競爭條件。使用反應性的要點是值是反應性的，可以通過組合 API 在其他地方組合。
在這種情況下，無需load_data在setupbody 中等待完成。應該在值可用時訪問它：
const { names_data, error, load_data } = getData(...);
load_data();
watch(names_data, data => {
console.log(data);
});
uj5u.com熱心網友回復：
Estus Flask 接受的答案的后續回答：
如果我制作names_data字典而不是串列，即通過執行
...
names_data = ref({})
...
...
const data = await Promise.all(promises);
for (let ind=0; ind<data.length; ind ) {
let filename = filenames[ind]
names_data.value[filename] = data[ind]
}
...
然后watch()不再起作用。它在被替換setup()通過watchEffect()如下：
watchEffect(() => {
console.log("updated data", names_data.value), names_data.value
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/371643.html
標籤：Vue.js Vuejs3 参考 Vue反应性 可组合的