2024-09-25 · Vue
Tell watch and watchEffect apart in Vue 3
Source tracking, laziness, and cleanup: the three differences that decide which one you need.
Introduction
Side-by-side examples of both watchers reacting to the same value, including the trap where watchEffect never re-runs.
The mental model
- Start from the smallest version that could work, and make it observable.
- Write down the trade-off you are accepting, not only the feature you are shipping.
- Revisit the decision when the team grows; most choices in Vue have a shelf life.
A practical starting point
- Reproduce the situation on a scratch branch, next to a measurement you trust.
- Change one variable at a time, and keep the diff small enough to explain in one sentence.
- Keep the result, throw away the scaffolding.
git switch -c experiment/one-thingClosing thoughts
None of this is doctrine. Treat it as a checklist you are allowed to disagree with — ideally with an experiment of your own that settles the argument.