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]

你想要的结果是什么