Часы Vue и вычислительное использование

И во Vue, watchи во Vue computedиспользуются для мониторинга изменений данных, но их сценарии использования и методы реализации немного отличаются.

watchОн используется для отслеживания определенного изменения данных, и когда отслеживаемые данные изменяются, соответствующая функция обратного вызова будет выполняться автоматически. watchИспользование заключается в следующем:

watch: {
  myData: function(newValue, oldValue) {
    // do something when myData changes
  }
}

В приведенном выше коде myDataэто отслеживаемые данные, когда их значение изменится, watchбудет автоматически выполнена функция обратного вызова, и новое значение newValueи старое значение будут переданы в oldValue.

computedОн используется для расчета определенного значения, которое будет автоматически обновляться в соответствии с изменениями в данных, от которых оно зависит. Разница watchв том, что computedвместо выполнения функции обратного вызова возвращается новое значение. computedИспользование заключается в следующем:

computed: {
  myComputedValue: function() {
    // calculate myComputedValue based on other data
    return result;
  }
}

В приведенном выше коде myComputedValueэто рассчитанное новое значение. Его расчет основан на других данных. При изменении данных он computedавтоматически пересчитывает новое значение и возвращает его.

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