Vue - Understand 'computed' and 'watch'

Vue provides two generic ways to listen and react to data changes: computed and watch. What are the similarities and differences between the two properties and how to decide which one to use?

Definition of computed

computed is a property that processes data bound to the view and observes for subsequent data changes. computed caches data based on its dependencies (the data object), meaning that it only reevaluates itself when the relevant dependencies change.

Definition of watch

As the name implies, watch is a listener that observes and responds to data changes on the Vue instance. Using the watch property allows us to perform asynchronous operations, such as accessing an API, limiting the frequency of invoking a method, and manipulating the intermediate state before we get the final result. These are things that computed property unable to do.

Summary

Both computed and watch play the role of observing data changes and perform corresponding actions. They are Vue implementation of the event listener, but computed mainly focus on processing simple and synchronous data manipulation, whereas watch is used to complete a complex business logic with relatively expensive overhead. In situations where you are not sure which property to choose, use computed first, as so to avoid the embarrassing situation of making multiple calls to watch.