watchEffect doesn't trigger when it should

[fabruex]

I have an InputNumber custom component with a watchEffect watcher. I use this watcher to set the value of the input element when the modelValue prop changes from outside. This is the sequence:

• change on modelValue trigger a cFormattedValue computed property which formats the value
• change on cFormattedValue should trigger the watchEffect to set the value of the input element

I use a non-reactive variable (isValueFromComponent) to check if the value changes from outside or not (I have a feeling that this variable could be the cause of my issue)

watchEffect(() => {

  // ==================================================================
  //  IF I ADD THIS LINE EVERYTHING WORKS
  // console.log('watch effect',cFormattedValue.value)
  // ==================================================================

  if (elInputElement.value && !isValueFromComponent) {
    setInputValue(cFormattedValue.value)
  }

  isValueFromComponent = false

})

The problem is that watchEffect doesn't trigger anymore after the first time, but if I add a simple console.log(cFormattedValue.value) at the beginning everything works fine, even if cFormattedValue.value is within the next if condition.

In this link I created a minimal reproduction in the Vue playground:

• without the console.log, clearing the value and then clicking "set new value" doesn't work
• with the console.log, clearing the value and then clicking "set new value" works

Am I doing something wrong? Thanks

[Alfred-Skyblue]

watchEffect(() => {
  // This line triggers the getter, collects dependencies correctly, and will trigger `watchEffect` upon the next update.
  cFormattedValue.value
  if (elInputElement.value && !isValueFromComponent) {
    //  If the condition here is not met during the initial execution, the computed property will be skipped, and `watchEffect` won't collect dependencies. Consequently, subsequent updates to the computed property will not trigger the `watchEffect`.
    setInputValue(cFormattedValue.value)
  }

  isValueFromComponent = false
})

In summary, if you need to use watchEffect, ensure that during the initial execution of watchEffect, you explicitly access this reactive variable to trigger the getter. Otherwise, consider using watch(cFormattedValue, () => { /* code */ }).

[LinusBorg]

From what I read now looks like watchEffect callback runs evey time a reactive value within it changes its value, without any conditions.

Could you please link to and/or quote to the part of the docs that give you that impression?

This part of the docs pretty much says what I wrote, IMHO:

watchEffect, on the other hand, combines dependency tracking and side effect into one phase. It automatically tracks every reactive property accessed during its synchronous execution.

• isValueFromComponent is not reactive, so it won't be tracked
• cFormattedValue is reactive, but not accessed during the initial run(s), so it also won't be tracked.

But maybe we need to point that out somewhere else / earlier? The docs team is always thankful for specific hints for locations that can lead to misunderstandings.

I'm sorry if this sounds confrontational, that was not my purpose at all

All good :)

[fabruex]

I think that what it's not clear it's the concept of "initial run(s)". In my case the watcher runs twice during initialization, first time when elInputElement is created and then when cFormattedValue changes its value (and isValueFromComponent is false, so the condition is true, same case as the one that doesn't work). This makes me think that cFormattedValue is tracked, so now I don't understand why when I click "set new value" it doesn't work. Sorry but I'm still confused.

[LinusBorg]

I'm in bed now, will have another look again. May well be that i still misunderstand did problem.

[fabruex]

Ok, it was my fault, I set isValueFromComponent in the handleInput method one line after from where it should be, now everything works fine. Sorry for your time. Thanks

[fabruex]

Sorry but I have to re-open this: yes, I made a mistake, but there's still something not clear.

I created a simpler case in this link, with all the steps to reproduce the issue.

Could you please take a look at it when you have time and tell me why, once I click 'set input from component', 'set input from outside' doesn't work anymore?

Thanks

[LinusBorg]

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.

In your example:

1. once isExternalValue is false,
2. that effect run will not read from cValueFormatted.value,
3. so that dependency is no longer being tracked.
4. So the effect will now not triggered when cValueFormatted changes.

[fabruex]

Ok, now I really got it. So, once a reactive value is no longer read, the dependency is discarded.
I was thinking watchEffect the same as a standard watch with immediate: true but without the need to specify the dependency, so everything inside it is always tracked, no matter what.
So, for complex callback, to be sure, would be recommended to specify the dependencies at the beginning, like:

watchEffect(() => {
  inputElement.value;
  cFormattedValue.value;
  ...
})

However, maybe it's just me who's slow on the uptake 😄 , but I would suggest to specify this behavior more explicitly in the documentation, maybe with a specific example, but that's up to you.

Thanks a lot again, I won't bother you again 😃