17

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 information on SO:

  • I was attempting to answer this question, and was told multiple times that this isn't the case.
  • The accepted answer here indicates that "[a method] will only be evaluated when you explicitly call it."

I searched through the docs and I didn't see anything incredibly clear.

If they are not reactive, then why does this example work?

<ul>
  <li v-for="animal in animals" :key="animal.id">
    <span v-if="isAwesome(animal)">{{ animal.name }}</span>
  </li>
</ul>

export default {
  data() {
    return {
      awesomeAnimalIds: [],
      animals: [
        { id: 1, name: 'dog' },
        { id: 5, name: 'cat' },
        { id: 9, name: 'fish' },
      ],
    };
  },
  created() {
    setTimeout(() => {
      this.awesomeAnimalIds.push(5);
    }, 1000);
    setTimeout(() => {
      this.awesomeAnimalIds.push(9);
    }, 2000);
  },
  methods: {
    isAwesome(animal) {
      return this.awesomeAnimalIds.includes(animal.id);
    },
  },
};

I would really like to have a definitive and satisfying answer that this community can refer to.

Improve this question
2
  • Great question -- not sure there is an "official" answer that represents reality! Commented Jan 7, 2020 at 21:36
  • methods are not reactive per-se. If they contain reactive references, a change to any of those will trigger a re-render in the template, if the template uses the method, which will re-call the method (that's why your example works). To explain this better: if you didn't reference the method in the template, it would not get re-run, even if internal refs changed. So you can't watch a method for changes and expect that watcher to be triggered whenever internal reactive refs inside the method get changed. Hope that makes sense. Commented Feb 5, 2022 at 18:22

4 Answers 4

Reset to default
13

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

Vue reactivity cycle diagram

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

From this and the 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).
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

4

No, methods are not reactive. Only data can be reactive in Vue.

BUT its is important understand how Vue works...

  1. Vue will take your template, compiles it into render function and runs the render function
  2. While the render function is running, Vue monitors all data() members (it does this all the time, not only during 1st render). If any of the data is accessed during render, Vue knows that content of this data member influences the result of rendering.
  3. Vue use the knowledge gathered in step 2. Whenever data member "touched" during rendering changes, it knows re-render should happen and do the thing...

It doesn't matter if you reference the data member directly, use it in computed or in a method. If the data is "touched" during rendering, the change of the data will trigger re-render in the future...

Improve this answer

Comments

3

This is a very interesting case.

From what I have read and my experience I can say that: No, methods are not inherently reactive. A method must be explicitly called for it to execute.

But, then how can I explain your case? I put your code in in a sandbox and sure enough, as you push id's into the array, the template updates to display the animal name. This would indicate some reactivity. What gives?

Well, I ran an experiment. I added a simple div to each loop that generates a random number when generated.

<li v-for="animal in animals" :key="animal.id">
        <div>{{ random() }}</div>
        <span v-if="isAwesome(animal)">{{ animal.name }}</span>
</li>

...

random() {
      return Math.random();
}

And what I saw was that every time a new id was pushed into the array, all the random numbers would change. This is the key to understand why it "seems" as though the method isAwesome is reactive.

Somehow, when a new ID is pushed to the array, Vue re-renders the loop entirely, hence executing the methods again. I can't explain the inner workings of why vue re-renders the entire loop, that would require further research.

So to answer your question. isAwesome is not reactive, it is merely an illusion created by the re-render of the loop.

Improve this answer

1 Comment

it's true for any observable property in a component (prop / data / computed). whenever they're changed it triggers update which causes a re-render and triggers any methods that are bound in the template
1

To summarize (for Vue 3)

  • Computed properties are cached based on their reactive dependencies. A computed property will only re-evaluate when some of its reactive dependencies have changed.
  • Methods will always run whenever a re-render happens. So you need to be careful not putting too heavy logic in methods and use computed properties instead when possible.

Source: https://v3.vuejs.org/guide/computed.html#computed-caching-vs-methods

See it in action

https://codepen.io/hulius/pen/BamQaWQ

<div id="app">
  <textarea v-model="notADependency"> </textarea>
  <textarea v-model="dependency"> </textarea>
  <p>
    method (run at each render):
    <pre>{{ methodNow() }}</pre>
  </p>
  <p>
    computed (run only when a dependency is changed):
    <pre>{{ computedNow }}</pre>
  </p>
</div>

const app = Vue.createApp({
  data() {
    return {
      notADependency: "I'm not a dependency, I will only trigger a new rendering",
      dependency: "I'm a dependency, all computed properties depending on me will be recomputed, then it will trigger a new rendering"
    }
  },
  computed: {
    computedNow() {
      return Date.now() + " " + this.dependency
    }
  },
  methods: {
    methodNow() {
      return Date.now() + " " + this.dependency
    }
  }
})

app.mount('#app')
Improve this answer

2 Comments

That's a Vue 3 valid answer. Beware, other answers above assume the project is in Vue 2.
Thanks @Romainpetit, I edited my answer to specify this

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.