Docs improvement: Clarify watchEffect's watch list during conditional dependency access #13688
Description
Vue version
da1f8d7 (retrieved from play.vuejs.org)
Link to minimal reproduction
Steps to reproduce
Erase letters in the first input, then add letters in the second, and watch the reactivity work
What is expected?
From the docs descriptions and included examples, it is unclear what should happen when watchEffect is used with conditional ref access in the function body. According to the official description, watchEffect is similar to watch but computes dependencies on synchronous execution. But it is unspecified whether deps are recomputed on every synchronous run, or just on the first execution. Especially given the fact watchEffect uses immediate under the hood, a reasonable assumption might be it uses just these first-encountered deps to determine reactivity.
What is actually happening?
Current behavior (see example link above) does exhibit reactivity on the conditional dependency. But without explicit docs, I'm not sure whether this is an accidental side-effect which may disappear in future updates, or intended behavior.
Using chrome debugger breakpoints reveals the deps actually change per run -- so theoretically, is watchEffect more efficient than watch in this example? For instance, if I used watch([msgA, msgB], (newA, newB) () => {...}), then every time newB changed, whether the function depended on it or not, the callback would execute. In contrast, watchEffect(() => {...}) doesn't trigger breakpoints when msgB changes, if it isn't a dependency based on current conditionals.
These would be helpful scenarios to clarify in the docs.
Thanks!
System Info
Any additional comments?
No response