Вычисляемое свойство Vue3

Vue3 选项式 APIVue3 Options API

ComputedВычисляемые свойства — это способ в Vue.js объявлять вычисляемые значения, которые зависят от других данных.

ComputedЭто позволяет инкапсулировать сложную логику в свойстве и использовать его в шаблонах как обычные данные.

ComputedЗначение свойства автоматически обновляется на основе зависимых данных, поэтому при изменении данных,computedсвойство также будет автоматически пересчитано.

Зачем использовать вычисляемые свойства?

  1. Упрощение логики шаблона
    В Vue написание сложной логики прямо в шаблонах может усложнить поддержку кода. Используяcomputedвычисляемые свойства, вы можете вынести сложную логику из шаблонов, сделав код понятнее.

  2. Оптимизация производительности
    ComputedВычисляемые свойства кэшируются на основе данных, от которых они зависят. Только когда эти данные изменяютсяcomputedсвойство будет пересчитано. Этот механизм позволяет избежать ненужных вычислений и повышает производительность.

  3. Реактивные обновления
    Реактивная система Vue автоматически отслеживаетcomputedзависимости вычисляемых свойств и пересчитывает значения при изменении зависимостей, гарантируя, что данные всегда актуальны.

Как использовать вычисляемые свойства?

В Vue3,computedвычисляемые свойства можноcomputedопределить с помощью функции. Вот простой пример:

Пример

import { ref, computed } from 'vue';

export default {
  setup() {
    // Определяем реактивные данные
    const firstName = ref('John');
    const lastName = ref('Doe');

    // Определяем вычисляемое свойство
    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

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

Пояснение кода

  1. refФункция
    используется для создания реактивных данных.firstNameиlastNameявляется реактивной переменной.
  2. computedФункция
    используется для определения вычисляемого свойства.fullNameявляетсяcomputedвычисляемое свойство, которое зависит отfirstNameиlastName。
  3. Использование в шаблонах
    В шаблоне можно напрямую использоватьfullName, оно будет автоматически обновляться в зависимости отfirstNameиlastNameзначение ...

Механизм кэширования вычисляемых свойств

ComputedЗначение вычисляемого свойства кэшируется, и оно пересчитывается только тогда, когда изменяются его зависимые данные. Например:

Пример

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

console.log(doubleCount.value); // Выводит 0
count.value = 2;
console.log(doubleCount.value); // Выводит 4

В этом примере,doubleCountзначение ... пересчитывается только тогда, когдаcount... изменяется.

Вычисляемое свойство vs Методы

ComputedВычисляемые свойства иmethodsМетоды также могут использоваться для инкапсуляции логики, но у них есть следующие различия:

  1. Кэширование
    ComputedВычисляемые свойства кэшируют результаты, в то время какmethodsМетоды повторно выполняются при каждом вызове.
  2. Производительность
    Если логика сложна и требует частых вызовов, использованиеcomputedвычисляемых свойств может повысить производительность.
  3. Сценарии использования
    ComputedВычисляемые свойства подходят для значений, вычисляемых на основе других данных, тогда какmethodsметоды подходят для выполнения операций или обработки событий.

Сравнение на примере:

Пример

const count = ref(0);

// Используйте вычисляемое свойство
const doubleCount = computed(() => count.value * 2);

// Используйте методы
function getDoubleCount() {
  return count.value * 2;
}

Vue3 选项式 APIVue3 Options API

Другие расширения