Are methods in Vue reactive?

Question

I\'ve been using Vue for a while, and my experience has always been a method will recompute if its underlying reactive data is updated. I\'ve encountered conflicting informa

Answer 1

Based on How Changes Are Tracked from the docs, here's what's going on:

1. A special watcher is created for the component instance to determine when a re-render is required.

2. Vue converts all properties of data to getters and setters.

get animals() {
  // Add dependency: potentially trigger a re-render if animals updates
  ...
}
set animals() {
  // Notify the watcher that animals has been updated
  ...
}
get awesomeAnimalIds() {
  // Add dependency: potentially trigger a re-render if awesomeAnimalIds updates
  ...
}
set awesomeAnimalIds() {
  // Notify the watcher that awesomeAnimalIds has been updated
  ...
}

3. The template is rendered. During the render, a call to isAwesome is made from the template.
4. In the body of isAwesome, the getter for awesomeAnimalIds is invoked.
5. The watcher establishes a dependency on the awesomeAnimalIds field of data.
6. After a timeout, awesomeAnimalIds is updated, which invokes the awesomeAnimalIds setter.
7. Because the template depends on a data field which received a notification, a re-render is triggered.
8. Repeat step (3).

From this and this example above, we can conclude the following:

A method call made from a template establishes a reactive dependency on the subset of data fields used in the method call stack. If the underlying fields are updated, it will trigger a re-render of the component.

There is a common misconception that methods are "invoked only once" or "fire and forget" when called from a template. This is clearly not always the case because methods can establish a reactive dependency.

So when should we use a computed property vs a method?

See the guide section on Computed Caching vs Methods. Here's my take on it:

• A computed property will only reevaluate when its reactive dependencies have changed. I.e. it uses caching for improved efficiency.
• Computed properties should be side-effect free. E.g. you shouldn't call fetch from them.
• Always prefer a computed property to a method if possible for efficiency reasons.
• Use a method if you have side effects or if you need to pass in an argument (as seen in the original question).