I found x in obj dependencies will always trigger once the property is change, are there some reasons for it and can we do better?

[StephenChips]

Example Code

<template>
  <div></div>
</template>
<script setup>
import { reactive, watchEffect } from "vue";

let a = reactive({ a: 10 });

watchEffect(() => {
  console.log("a" in a);
});

let counter = 0;

setInterval(() => {
  a.a = ++counter;
}, 1000);

</script>

<style scoped>
button {
  font-weight: bold;
}
</style>

Vue's version: 3.2.36

You can paste the code to CodeSandbox or any other online IDE to see the result.

Acutal result

Printed true on the console constantly.

What does I expect

The true will be printed only once (when the watchEffect ran the effect function).

Reason

The in operator test if a property is in the object (and its prototype chain), it will only have two result: true and false. IMHO, I think
effect functions should only be run when the reactive properties' change cause watched expression to produce a new different result. Updating a existing property will not make a existed property disappear, and the result of the in expression itself will not change, so I think I may be it is not necessary to trigger the effect.

Of course this is just my rough idea, if their are something I didn't consider yet, please leave your comment below.