时间戳

首页 > 解决方案 > vue3 组合 API - 观看

vuejs3 - vue3 组合 API - 观看

问题描述

我正在尝试掌握组合 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。我有一个计算函数也可以正常工作。

标签： vuejs3quasar-frameworkvue-composition-api

解决方案

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

推荐阅读