Vue method vs observer vs calculated property

Vue.js provides us with methods, observers and calculated properties. When to use one versus the other?

React to certain events in the DOM
Call a function when something happens in the component. You can call methods from calculated properties or watch programs.

You need to combine new data from existing data sources
You have a variable used in a template, which is constructed based on one or more data attributes
You want to simplify complex nested attribute names into more readable and easy-to-use names, but update them when the original attributes change
You need to reference the values in the template. In this case, it is better to create a calculated attribute because it is cached.
You need to listen to changes in multiple data attributes

You want to monitor when the data attributes change, and perform some operations
You want to hear changes in the value of props
You only need to listen to a specific attribute (you cannot watch multiple attributes at the same time)
You want to monitor a data attribute until it reaches a certain value, and then perform some operations

Download mine for freeVue manual