Once your data is reactive, three tools help you work with it. Computed properties derive a new value from existing data, and Vue caches the result until its dependencies change. Watchers run code whenever a value changes, which is useful for side effects such as saving data or calling an API.
Lifecycle hooks let you run code at specific moments in a component's life: when it is created, added to the page (mounted), updated, or removed. A good rule of thumb: use computed for values, watchers for actions, and hooks for setup and cleanup.
The watcher lesson uses the Composition API's watch and
watchEffect, which the next module covers in depth. Watch the lessons in
order, then continue on to Composition API.
An introduction to computed properties and watchers in Vue 3, with examples.
The Net Ninja covers computed properties alongside mouse events, v-for lists, and attribute binding.
The differences between watch and watchEffect in the Composition API, when to use each, and how watchEffect is similar to computed.
The "Lifecycle Hooks" section of freeCodeCamp's Vue 3 course: running code at key moments in a component's life.
Codevolution's lesson on Vue 3 lifecycle hooks.
The Net Ninja puts data, methods, and lifecycle hooks to work building a reaction-timer game from scratch.