Vue method vs observer vs calculated property

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

When to use the method

  • 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.

When to use calculated properties

  • 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

When to use observer

  • 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

More vue tutorials: