watch and watchEffect

[yanzhen222]

Help！
When using watch to listen, whether temp or height first reaches the condition, it will send a request. As long as the other changes, even if it does not meet the condition, it will also send a request.
Use watchEffect to listen, when temp first reaches the requirement to send a request, then click height, no matter how much will not send a request, but when height first reaches the requirement to send a request, and then change temp, even if it does not meet the condition, will also send a request, may I ask how to solve these situations

<template>
    <div class="person">
       <h2>temp:{{ temp }}℃</h2>
       <h2>height:{{ height }}cm</h2>
       <button @click="changeTemp" >temp+10</button>
       <button @click="changeHeight" >height+10</button>
    </div>
</template>

<script lang="ts" setup name="Person234">
import { ref, watch, watchEffect } from "vue";

let temp = ref(10)
let height = ref(0)

function changeTemp(){
    temp.value += 10
}

function changeHeight(){
    height.value += 10
}

watch([temp,height],(value)=>{
    let [newTemp,newHeight] = value
    // console.log(newTemp,newHeight)
    if (newTemp >= 60 || newHeight >= 80) {
        console.log('changed')
    }
})

// watchEffect(()=>{
//     if (temp.value >= 60 || height.value >= 80) {
//         console.log('changed')
//     }
// })

</script>

<style scoped>
.person {
    background-color: #363d9b;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

li {
    font-size: 20px;
}
</style>

[yuvalkarif]

Hi @yanzhen222, It seems like if you actually trying to do something with it, except logging it it works well, see this Vue SFC example.

It was summed up nicely here:

Yeah sure. That example is in fact showing the point I wanted to explain previously.

There's two aspects you are missing about how reactive dependency tracking works:

1. reactive dependencies are tracked by observing property reads. If there's a reactive object or a ref in the code of an effect, but its not being read from during the effect's run, no dependency will be tracked.
2. reactive dependencies are re-collected on each run of an effect. This is so that a) new dependencies, that might not have been accessed/read from in a previous run, can be read, and b) old dependencies, that are no longer being read from in the latest run, can be discarded.

Originally posted by @LinusBorg in #9773 (comment)

[Wei-Ba]

你想要的结果是什么

[skirtles-code]

JavaScript (like many languages) uses short-circuit evaluation for operands of logical operators.

So when you write this:

if (temp.value >= 60 || height.value >= 80) {

If the left-hand operand (temp.value >= 60) is truthy, it won't evaluate the right-hand operand (height.value >= 80). As a result, height.value won't be tracked as a dependency of watchEffect and changes to height.value won't have any impact.

---

It isn't clear to me what behaviour you want, but I assume you only want to 'send a request' when the condition transitions from false to true.

There are several ways you could achieve that. For example, you could use a computed:

const isEnough = computed(() => temp.value >= 60 || height.value >= 80)

watch(isEnough, (value) => {
  if (value) {
    console.log('changed')
  }
})

• Playground example

You could do something similar with computed and watchEffect:

const isEnough = computed(() => temp.value >= 60 || height.value >= 80)

watchEffect(() => {
  if (isEnough.value) {
    console.log('changed')
  }
})

• Playground example

You could also do it using just watch, without a computed:

watch(() => temp.value >= 60 || height.value >= 80, (value) => {
  if (value) {
    console.log('changed')
  }
})

• Playground example

These examples rely on a couple of main ideas:

1. If the value of the source passed to watch hasn't changed it won't call the callback.
2. If the value of a computed hasn't changed, it won't trigger downstream reactive effects (such as watchEffect).