vue3成分API-观察

Question

我正在努力掌握组合API。与手表作斗争：

const totalValuation = ref(0);
const values = ref([1, 2, 3]);
totalValuation.value = watch(finalTasksFiltered.value, () => {
return values.value.reduce((prev, curr) => {
console.log(prev + curr);
return prev + curr;
}, 0);
});

return {
finalTasksFiltered,
totalValuation,
};

console.log的工作原理与(1,3,6(完全一样，但我似乎无法将其呈现到DOM中。当我检查控制台时，它很好，但在类似的DOM中｛｛totalValuation｝｝它返回：

() => { (0,_vue_reactivity__WEBPACK_IMPORTED_MODULE_0__.stop)(runner); if (instance) { (0,_vue_shared__WEBPACK_IMPORTED_MODULE_1__.remove)(instance.effects, runner); } }

哦，我在用Quasar——不确定这是否有什么不同。

我肯定是小东西。

我从维尤引进了裁判和手表。我有一个计算函数也工作得很好。

Answer 1

watch用于在某些值发生更改时执行函数。它并不意味着被指定为参考。你想要做的似乎更适合computed

观察：(无分配(

watch(finalTasksFiltered.value, () => {
totalValuation.value = values.value.reduce((prev, curr) => {
console.log(prev + curr);
return prev + curr;
}, 0);
});

计算：(使用赋值(

const totalValuation = computed(() => {
return values.value.reduce((prev, curr) => {
console.log(prev + curr);
return prev + curr;
}, 0);
});