These three options can be confusing for a beginner and it takes a while to know how and when to use then. Here are some quick tips to help.
Methods
Always use these when binding events. In other words when something (aka an event) happens such as a user has clicked a button. An example would be a button to increment a counter or to make an http request or to refresh a page.
Methods can be used to bind to data as well but it is best not to because the method is executed for every re-render cycle of your component which can lead to inefficiencies.
In addition, if methods are not linked to an event, then there is nothing to “call” it. So to use it to bind data, it has to execute automatically somehow. For example:
methods: {
getRandomNumber() {
this.name = Math.random()
// return Math.random() <- this will also work
}
}In the example above, a random number is generated and displayed on screen automatically when the page reloads because the method is executed and is placed/rendered in the located where it was called.
Computed properties
Computed properties are exactly like methods except that they have a trigger and are aware when something (eg a data property) has changed. When it changes, the computed property automatically executes. Amazing right?
They are great to derive data that is based on other data. The main advantage is that they will only be re-evaluated if the underlying data changes which makes them very efficient. (Unlike methods which are evaluated on every reload as mentioned above).
Computed properties are not used with event binding so don’t use them to execute an action upon a button click or mouse click.
This also means that you don’t usually pass arguments to computed properties even though you can.
They are declared just like methods, but they are used just like data properties.
In other words, if you are displaying a value that depends on other values, if the underlying value changes, computed properties will automatically update or “react”.
Computed properties are declared like methods, eg
updateNumber() {
return a+b
}But when they are called in the template, they are just pointed or referenced to and the brackets are left off. eg
<p>The updated number is {{ updatedNumber }} </p>Not like this:
<p>The updated number is {{ updatedNumber() }} </p>Watchers
With watchers, you usually watch a data property and if or when it changes, it can trigger some more code.
It is probably used the least because methods are used to action an event, and computed properties to output something to the screen (coz it can return a value), but watchers perform a defined action when something else changes.
Watchers are defined just like methods. eg
watch: {
name() {
// execute this code when the name data property changes
}
}So watchers are named the same as data properties or computed property. ie you repeat the name of what you want to watch.