Data, methods, computed, watch

Data: управление состоянием компонента

Свойство data в Vue.js используется для хранения реактивного состояния компонента. Оно представляет собой функцию, возвращающую объект с ключами и значениями. Каждый ключ становится реактивным, и любые изменения автоматически отражаются в шаблоне.

export default {
  data() {
    return {
      message: 'Привет, Vue!',
      count: 0,
      items: []
    };
  }
}

Особенности:

  • Все поля, объявленные в data, становятся реактивными.
  • Изменение значений автоматически вызывает перерендеринг связанных частей шаблона.
  • data всегда должна быть функцией в компонентах, чтобы каждый экземпляр имел отдельное состояние.

Methods: методы для логики и действий

Свойство methods используется для описания функций, которые выполняют действия и реагируют на события. Методы не кэшируются и каждый раз выполняются заново при вызове.

export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count += 1;
    },
    greet(name) {
      return `Привет, ${name}!`;
    }
  }
}

Особенности:

  • Методы вызываются через события (@click="increment") или напрямую в шаблоне ({{ greet('Vue') }}).
  • Методы могут изменять состояние компонента, вызывая реактивное обновление.
  • Внутри методов ключевое слово this ссылается на экземпляр компонента.

Computed: вычисляемые свойства

computed позволяет создавать свойства, значения которых вычисляются на основе других реактивных данных. В отличие от методов, вычисляемые свойства кэшируются и пересчитываются только при изменении зависимостей.

export default {
  data() {
    return {
      firstName: 'Иван',
      lastName: 'Иванов'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
}

Преимущества computed:

  • Кэширование улучшает производительность.
  • Можно использовать геттеры и сеттеры для двусторонней связи:
computed: {
  reversedName: {
    get() {
      return this.firstName.split('').reverse().join('');
    },
    set(value) {
      this.firstName = value.split('').reverse().join('');
    }
  }
}
  • Подходит для любых зависимых вычислений, где результат зависит от других реактивных данных.

Watch: наблюдатели за изменениями

Свойство watch позволяет следить за изменениями данных и выполнять побочные эффекты. В отличие от computed, наблюдатели вызываются каждый раз при изменении отслеживаемого значения и не кэшируются.

export default {
  data() {
    return { count: 0 };
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`Count изменился с ${oldValue} на ${newValue}`);
    }
  }
}

Особенности watch:

  • Подходит для асинхронных операций и побочных эффектов (запросы к API, обновление локального хранилища).
  • Можно отслеживать вложенные свойства или целые объекты, используя опцию deep: true:
watch: {
  'user.profile': {
    handler(newVal) {
      console.log('Профиль пользователя обновлён', newVal);
    },
    deep: true
  }
}
  • Опция immediate: true позволяет вызвать наблюдатель сразу после инициализации.

Взаимодействие между data, methods, computed и watch

  • data хранит исходное состояние.
  • methods изменяют состояние и выполняют действия.
  • computed вычисляет производные значения на основе состояния.
  • watch реагирует на изменения состояния и запускает побочные эффекты.

Пример комплексного использования:

export default {
  data() {
    return {
      firstName: 'Анна',
      lastName: 'Петрова',
      count: 0
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  },
  methods: {
    increment() {
      this.count += 1;
    }
  },
  watch: {
    count(newVal) {
      console.log(`Счётчик теперь равен ${newVal}`);
    },
    fullName(newVal) {
      console.log(`Полное имя обновлено: ${newVal}`);
    }
  }
}

В этом примере изменения в firstName или lastName автоматически обновляют fullName через вычисляемое свойство, а watch фиксирует изменение и выводит результат в консоль. Методы управляют состоянием напрямую. Такой подход обеспечивает чистую архитектуру компонентов и предсказуемое поведение реактивной системы.

Оглавление