Vue3 Computed property

Vue3 选项式 APIVue3 Options API

ComputedComputed properties are a way in Vue.js to declare calculated values that depend on other data.

ComputedIt allows you to encapsulate complex logic in a property and use it in templates like ordinary data.

ComputedThe value of the property automatically updates based on its dependent data, so when data changes,computedthe property will also be recalculated automatically.

Why use Computed properties?

  1. Simplify template logic
    In Vue, writing complex logic directly in templates can make code difficult to maintain. By usingcomputedcomputed properties, you can move complex logic out of templates, making the code clearer.

  2. Performance optimization
    ComputedComputed properties are cached based on their dependent data. Only when the dependent data changescomputedwill the property be recalculated. This mechanism avoids unnecessary calculations and improves performance.

  3. Reactive updates
    Vue's reactive system automatically trackscomputedthe dependencies of computed properties and recalculates values when dependencies change, ensuring data is always up to date.

How to use Computed properties?

In Vue3,computedcomputed properties can becomputeddefined using the function. Here is a simple example:

Example

import { ref, computed } from 'vue';

export default {
  setup() {
    // Define a reactive data
    const firstName = ref('John');
    const lastName = ref('Doe');

    // Define a computed property
    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

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

Code explanation

  1. refThe function
    is used to create reactive data.firstNameandlastNameis a reactive variable.
  2. computedThe function
    is used to define a computed property.fullNameis acomputedcomputed property, which depends onfirstNameandlastName。
  3. Using in templates
    In the template, you can directly usefullName, it will automatically update based onfirstNameandlastNamethe value of ...

Computed property caching mechanism

ComputedThe value of a computed property is cached, and it is recalculated only when its dependent data changes. For example:

Example

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

console.log(doubleCount.value); // Outputs 0
count.value = 2;
console.log(doubleCount.value); // Outputs 4

In this example,doubleCountthe value of ... is recalculated only whencountthe ... changes.

Computed property vs Methods

ComputedComputed properties andmethodsMethods can both be used to encapsulate logic, but they have the following differences:

  1. Caching
    ComputedComputed properties cache results, whilemethodsMethods are re-executed on every call.
  2. Performance
    If the logic is complex and needs frequent calls, usingcomputedcomputed properties can improve performance.
  3. Use cases
    ComputedComputed properties are suitable for values calculated based on other data, whilemethodsmethods are suitable for performing operations or handling events.

Example comparison:

Example

const count = ref(0);

// Use a computed property
const doubleCount = computed(() => count.value * 2);

// Use methods
function getDoubleCount() {
  return count.value * 2;
}

Vue3 选项式 APIVue3 Options API

Other extensions