Computed vs Methods in Vue: Key Differences and Usage Guide

In Vue, computed properties cache their results and only update when their dependencies change, making them efficient for derived data. methods run fresh every time they are called and do not cache results, suitable for actions or calculations that should run on demand.

Quick Comparison

This table summarizes the main differences between computed properties and methods in Vue.

Factor	Computed Properties	Methods
Caching	Yes, results are cached until dependencies change	No, runs fresh every call
Use case	Derived reactive data based on dependencies	Functions for actions or calculations on demand
Performance	More efficient due to caching	Less efficient if called repeatedly
Reactivity	Automatically tracks dependencies	No automatic dependency tracking
Syntax in template	Used like properties: {{ computedValue }}	Called like functions: {{ methodName() }}

Key Differences

Computed properties in Vue are special reactive properties that depend on other reactive data. Vue tracks these dependencies and caches the computed value. This means the computed property only recalculates when one of its dependencies changes, making it very efficient for expensive calculations or derived state.

On the other hand, methods are regular functions defined in the Vue component. They do not cache their results and run fresh every time they are called, regardless of whether their inputs have changed. This makes methods suitable for actions triggered by events or calculations that should always run anew.

In templates, computed properties are accessed like normal data properties without parentheses, while methods require parentheses to invoke them. Choosing between them depends on whether you want caching and automatic dependency tracking (computed) or a fresh calculation on each call (methods).

Code Comparison

Here is an example showing a computed property that returns a full name by combining first and last names.

vue

import { defineComponent, ref, computed } from 'vue';

export default defineComponent({
  setup() {
    const firstName = ref('Jane');
    const lastName = ref('Doe');

    const fullName = computed(() => {
      console.log('Computed fullName recalculated');
      return `${firstName.value} ${lastName.value}`;
    });

    return { firstName, lastName, fullName };
  }
});

Output

Rendered output: "Jane Doe"
Console logs 'Computed fullName recalculated' only when firstName or lastName changes

Methods Equivalent

The same full name logic implemented as a method runs fresh every time it is called.

vue

import { defineComponent, ref } from 'vue';

export default defineComponent({
  setup() {
    const firstName = ref('Jane');
    const lastName = ref('Doe');

    function fullName() {
      console.log('Method fullName called');
      return `${firstName.value} ${lastName.value}`;
    }

    return { firstName, lastName, fullName };
  }
});

Output

Rendered output: "Jane Doe"
Console logs 'Method fullName called' every time fullName() is invoked

When to Use Which

Choose computed properties when you need to derive data that depends on reactive sources and want Vue to cache the result for better performance. This is ideal for displaying processed or combined data in templates.

Choose methods when you need to perform actions or calculations that should run fresh every time, such as event handlers or functions that do not depend on reactive caching.

In short, use computed for reactive, cached data and methods for non-cached, on-demand logic.

Key Takeaways

Use computed properties for reactive data that benefits from caching and dependency tracking.

Use methods for functions that should run fresh every time they are called.

Computed properties improve performance by recalculating only when dependencies change.

In templates, access computed like properties and methods like functions.

Choose based on whether you want cached reactive data (computed) or fresh execution (methods).