Когда я начал программировать на Vue и должен был реагировать на изменения, я всегда задавал себе один и тот же вопрос: вычислять или смотреть? 🤔️. Оба, кажется, делают то же самое, верно? Однако в некоторых случаях вычисляемое свойство может быть лучше, чем наблюдатель, и наоборот.

Рассчитано

Мы можем думать о вычисляемом свойстве как о обычном свойстве, но с той разницей, что Vue может автоматически оценивать его значение каждый раз, когда изменяется любая из его зависимостей. Например:

Свойство total будет вычисляться каждый раз при изменении price или quantity.

computed: {
  total() {
    return this.price * this.quantity;
  }
}

Смотреть

Наблюдатель — это, по сути, функция, которую Vue автоматически выполняет при изменении наблюдаемого свойства. Если мы возьмем приведенный выше пример, мы могли бы сделать это следующим образом:

watch: {
  quantity(val) {
    this.total = this.price * val;
  },
  price(val) {
    this.total = this.quantity * val;
  }
}

Это работает, но кода много. Нам пришлось бы добавить третьего наблюдателя, если бы свойство total также зависело от свойства tax. Это основная причина, по которой вместо этого лучше использовать вычисляемое свойство.

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

Предположим, мы хотим получить фильмы, в которых появляется определенный актер. Мы могли бы сделать это следующим образом:

export default {
  data() {
    return {
      actorId: null,
      movies: [],
    };
  },
  methods: {
    getMovies() {
      // http request
      axios.get(`movies/actor/${this.actorId}`)
      .then(resp => {
        this.movies = resp.data;
      });
    }
  },
  watch: {
    actorId(val) {
      if(val) this.getMovies();
    }
  }
}

Другой вариант использования наблюдателя — когда нам нужно следить за свойством данных, пока оно не достигнет определенного значения, и только потом что-то делать. Например:

watch: {
  quantity(val) {
    if (val > this.stock) {
      this.error = true;
      this.errorMessage = `We only have ${this.stock} units`;
    }
  },
}

Заключение

Computed и Watchers имеют разные варианты использования. Было бы лучше использовать вычисляемое свойство всякий раз, когда нам нужно вычислить значение на основе других свойств, учитывая, что Vue будет переоценивать свойство каждый раз, когда изменяется любая из его зависимостей, и нам не понадобится специальный наблюдатель для каждой зависимости. Но наблюдатель был бы лучше, если бы нам нужно было сделать что-то более общее, чем просто получить значение, такое как вызовы HTTP, сохранение данных в локальном хранилище, установка таймера или что-то еще, что мы не могли сделать с вычисляемыми свойствами.

Первоначально опубликовано на https://dev.to 1 апреля 2021 г.