Watch and watchEffect in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of watch in Vue?

watch lets you run code when a specific reactive value changes. It’s like setting a listener for that value.

intermediate

How does watchEffect differ from watch?

watchEffect automatically tracks all reactive values used inside it and reruns when any of them change, without specifying dependencies manually.

intermediate

When should you use watch instead of watchEffect?

Use watch when you want to watch specific values and react only to their changes, especially if you want to compare old and new values.

beginner

What is a common use case for watchEffect?

Use watchEffect for side effects that depend on multiple reactive sources without manually listing them, like updating the DOM or logging.

intermediate

How do you stop a watcher created by watch or watchEffect?

Both return a stop function. Call this function to stop watching and clean up resources.

What does watch in Vue require you to specify?

A No arguments, it tracks automatically

B The component name

C Only functions

D The reactive value(s) to watch

watch needs you to specify which reactive value(s) to watch explicitly.

Which Vue API automatically tracks dependencies inside its callback?

A watchEffect

B ref

C computed

D watch

watchEffect tracks all reactive dependencies used inside its callback automatically.

What can you access in the watch callback that you cannot in watchEffect?

A The DOM element

B The component instance

C The old and new values

D The reactive source list

watch provides old and new values to compare changes; watchEffect does not.

How do you stop a watcher in Vue?

A Call the stop function returned by <code>watch</code> or <code>watchEffect</code>

B Set the reactive value to null

C Reload the component

D Use <code>unwatch</code> method

Both watch and watchEffect return a stop function to stop watching.

Which is best for watching multiple reactive sources without listing them?

A watch

B watchEffect

C computed

D ref

watchEffect automatically tracks all reactive dependencies inside its callback.

Explain how watch and watchEffect work in Vue and when to use each.

Think about manual vs automatic dependency tracking and use cases.

Describe how to stop a watcher in Vue and why you might want to do that.

Consider cleanup and performance.