vue.js - vue3 watchEffect 无法正确捕获多个依赖项?

Question

测试地址
https://play.vuejs.org/#eNp9Us+LEzEY/Vc+cuqypT9QL7Ud/EEPelBRj...

场景如下

当我的 水温>=50 度 或者 水位>=5 的时候

要向后端发送一个请求

bug 复现步骤

1. 点击水温到 50 以上
2. 再次点击水位的时候 count 不会再变化

官方不是说 watchEffect 能收集到多个依赖吗?

但是对于有多个依赖项的侦听器来说，使用 watchEffect() 可以消除手动维护依赖列表的负担

Answer 1

借用 @jsdeferred 大佬的回复

每次执行完callback后都会清除此轮中没有用的依赖，height因为条件短路他的getter没有被执行导致他被清除掉不在当作是依赖，后面他的变更也不会使callback执行了

Answer 2

watchEffect 在 Vue 3 中确实可以自动收集依赖，并且当这些依赖发生变化时重新运行效应函数。但是，为了使其正常工作，你需要确保你正在访问的响应式数据在效应函数内部被正确地读取。

从你提供的测试地址来看，问题可能在于你是如何在 watchEffect 中使用 waterTemp 和 waterLevel 的。你需要确保在 watchEffect 的回调函数中直接访问这些响应式属性，这样 Vue 就可以追踪它们的变化。

以下是一个简化的示例，演示了如何在 watchEffect 中正确使用多个依赖：

import { ref, watchEffect } from 'vue';export default {  setup() {    const waterTemp = ref(0);    const waterLevel = ref(0);    const count = ref(0);    watchEffect(() => {      if (waterTemp.value >= 50 || waterLevel.value >= 5) {        // 发送请求到后端        count.value++;      }    });    // 假设这是处理水温变化的函数    function handleWaterTempChange(newValue) {      waterTemp.value = newValue;    }    // 假设这是处理水位变化的函数    function handleWaterLevelChange(newValue) {      waterLevel.value = newValue;    }    return {      waterTemp,      waterLevel,      count,      handleWaterTempChange,      handleWaterLevelChange,    };  },};

在上面的代码中，waterTemp 和 waterLevel 是响应式引用，当它们的值变化时，watchEffect 会自动重新运行。在 watchEffect 的回调函数中，我们直接访问了 waterTemp.value 和 waterLevel.value，这样 Vue 就可以追踪这两个依赖。

请检查你的代码，确保你是以这种方式使用 watchEffect 的。如果你仍然遇到问题，请提供更多的代码上下文，以便我能更精确地帮助你解决问题。