Computed Properties | Introduction To Vuejs

Using Computed Properties in VueJS

Computed properties in VueJS allow you to define properties that are computed based on other data properties. This guide covers the basics of using computed properties in VueJS, including defining computed properties, caching, and best practices.

Key Points:

Computed properties are cached based on their dependencies and only re-evaluate when their dependencies change.
They are useful for complex calculations or operations that depend on reactive data properties.
Computed properties can be defined using getter and setter functions.

Defining Computed Properties

Basic Usage

Define computed properties in the computed option of a Vue instance:


// JavaScript
const app = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
});




  Full Name: {{ fullName }}

Caching

Computed properties are cached based on their dependencies. They only re-evaluate when their dependencies change:


// JavaScript
const app = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName() {
      console.log('Computed fullName');
      return this.firstName + ' ' + this.lastName;
    }
  }
});




  Full Name: {{ fullName }}

Computed Properties with Getters and Setters

Using Getters

Computed properties can be defined with only a getter function:


// JavaScript
const app = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName;
      }
    }
  }
});




  Full Name: {{ fullName }}

Using Setters

Computed properties can also have a setter function to update the underlying data properties:


// JavaScript
const app = new Vue({
  el: '#app',
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName;
      },
      set(newValue) {
        const names = newValue.split(' ');
        this.firstName = names[0];
        this.lastName = names[1];
      }
    }
  }
});




  Full Name: {{ fullName }}

Using Computed Properties for Filtering and Sorting

Filtering

Use computed properties to filter data:


// JavaScript
const app = new Vue({
  el: '#app',
  data: {
    items: [
      { text: 'Learn JavaScript' },
      { text: 'Learn VueJS' },
      { text: 'Build something awesome' }
    ],
    searchText: ''
  },
  computed: {
    filteredItems() {
      return this.items.filter(item => item.text.includes(this.searchText));
    }
  }
});




  
  
    {{ item.text }}

Sorting

Use computed properties to sort data:


// JavaScript
const app = new Vue({
  el: '#app',
  data: {
    items: [
      { text: 'Learn JavaScript', priority: 2 },
      { text: 'Learn VueJS', priority: 1 },
      { text: 'Build something awesome', priority: 3 }
    ]
  },
  computed: {
    sortedItems() {
      return this.items.sort((a, b) => a.priority - b.priority);
    }
  }
});




  
    {{ item.text }} (Priority: {{ item.priority }})

Best Practices

Follow these best practices when using computed properties in VueJS:

Use Computed Properties for Complex Logic: Use computed properties for complex logic or calculations that depend on reactive data properties.
Avoid Side Effects: Avoid side effects in computed properties. They should be pure functions that return a value based on their dependencies.
Use Getters and Setters Appropriately: Use getters and setters to encapsulate complex logic and ensure data integrity.
Keep Computed Properties Simple: Keep computed properties simple and focused on a single responsibility.
Leverage Caching: Take advantage of computed properties' caching mechanism to optimize performance and avoid unnecessary recalculations.

Example Application

Here is an example application that demonstrates the use of computed properties for various tasks, including filtering, sorting, and handling complex logic:




  Computed Properties Example
  
  Full Name: {{ fullName }}

  
  
    {{ item.text }}
  

  
    {{ item.text }} (Priority: {{ item.priority }})

Summary

This guide provided an overview of using computed properties in VueJS, including defining computed properties, leveraging caching, using getters and setters, and best practices. By understanding and utilizing these features, you can create efficient and maintainable VueJS applications.

VueJS - Computed Properties