#14+ watch vs watchEffect - Основы Vue.js 3

Differences Between Vue.js 3 watch and watchEffect

The video discusses the differences and practical considerations between Vue.js 3’s watch and watchEffect APIs, focusing on their usage, benefits, and potential pitfalls.

Key Technological Concepts and Analysis

• watch Requires explicitly specifying reactive dependencies. It does not run on initial change unless immediate: true is set. This explicitness helps clarify which dependencies the watcher relies on, aiding code readability and maintainability.

• watchEffect Automatically tracks dependencies accessed inside its callback, running whenever any of those dependencies change. It uses Vue 3’s reactive dependency tracking system more fully and implicitly.

Product Features and Usage Insights

• The speaker initially preferred watch for its explicit dependency declaration, aligning with the principle “explicit is better than implicit.”
• Over time, the speaker shifted toward using watchEffect more often due to its automatic dependency tracking and simplicity.

Risks with watch

• If dependencies are not properly declared, it can lead to bugs or unexpected behavior.
• Other developers or AI-assisted code modifications might inadvertently break the watcher by adding or missing dependencies.
• Tests might catch these issues, but many projects lack comprehensive testing.

Advantages of watchEffect

• Reduces risk of missing dependencies since it automatically tracks them.
• Encourages writing code that anticipates multiple calls and side effects.
• Simplifies the mental model in collaborative or AI-assisted environments.

Additional Recommendations

• Split logically distinct side effects into separate watchEffect calls to avoid complex re-subscription or unintended multiple triggers.
• For scenarios requiring cleanup (e.g., event listeners), watchEffect supports an onCleanup function (introduced in Vue 3.5+), which improves management of side effects.
• When precise control over dependencies is necessary or when unsubscribing logic is complex, watch might still be preferred.

Practical Guidance / Tutorial Points

• Prefer watchEffect as the default choice to leverage automatic dependency tracking and reduce maintenance overhead.
• Use watch when you need to explicitly control which reactive properties trigger the watcher or when cleanup/unsubscription is complicated.
• Design watchers and effects anticipating multiple calls and side effects.
• Separate unrelated side effects into distinct watchers/effects for clarity and maintainability.
• Consider the context of your project:
  • Solo projects might benefit from watch for simplicity.
  • Team or AI-assisted projects benefit from watchEffect to avoid subtle bugs.
• Avoid premature optimization; it’s better to have slightly less efficient but more maintainable and error-resistant code.

Main Speaker / Source

The video is presented by a Vue.js developer/educator (name not specified) who shares personal experience and philosophy on using Vue 3’s reactive APIs, emphasizing practical programming principles and collaboration challenges, including AI-assisted code changes.