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).

[Eriana-Fang]

hmmm but why when height.value is over 80 I continue clicking the button and let's say it equals to 90 and then I click the button to increase temp, when temp.value is larger than 60, the request still can't be printed but it follows [truthy || anything is short-circuit evaluated to the truthy value], right? btw I found sth weird, I declare two variables, although I don't use them, the request is printed since temp.value > 60 or height.value > 80 no matter the order I click the button
watchEffect(()=>{
let h = height.value
let t = temp.value
if ( height.value >= 80 || temp.value >= 60){
console.log("request")
}
})

[skirtles-code]

Vue tracks reactive dependencies when they're accessed, not by static analysis. For a detailed explanation see:

• https://vuejs.org/guide/extras/reactivity-in-depth.html

But, in short, Vue detects when you access a ref's value property and adds it as a dependency when you do.

So, considering the expression height.value >= 80 || temp.value >= 60, the first part accesses height.value. This adds height.value as a dependency of the watcher. If height.value is over 80 then it won't evaluate the second part, so temp.value is never read. If it isn't read then Vue won't add it as a dependency of the watcher. As a result, changes to temp.value won't trigger the watcher.

When you add let t = temp.value, that accesses the property temp.value, which adds it as a dependency of the watcher. It doesn't matter whether it's used, Vue doesn't know how it's used, just accessing temp.value adds the dependency. Subsequent changes to that value will then trigger the watcher.