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 - 不确定这是否会有所不同。

我确信它是小东西。

我已经从 vue 导入了 ref 和 watch。 我的计算函数也可以正常工作。

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