Как отправить аксиос http-запрос на размещение, только если в Vue JS есть изменение объекта?

Question

Каков логический способ отправки axios http put запроса, только если есть изменение объекта и его свойств?

Я нахожучто я запускаю ненужные http-запросы, что является пустой тратой мощности сервера.Я хотел бы ограничиться стрельбой только в том случае, если отправляемый объект был обновлен или изменен по сравнению с исходной версией при загрузке страницы.

Моя главная причина этого заключается в том, что я использую автоматическое сохранение при вводе через @размытие, и поэтому на фронте http происходит много действий!

<input @blur="editInput()"></input>

Метод editInput() запускает axios, каждый раз отправляя запрос http.Нужен метод для проверки изменений?

Возможно, вы клонируете объект на хуке created()?А затем используйте какой-то метод для сравнения ... это было то, что я пытался, но не получилось.

Answer 1

Вы можете внимательно следить за своей собственностью следующим образом:

watch: {
    person: {
        handler: (newValue,oldValue) {

        },
        deep: true
    }
}

Answer 2

Вы всегда можете использовать watcher , например:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    foo: {
      bar: {
        baz: 'foo bar baz'
      }
    }
  },
  watch: {
    message(newValue, oldValue) {
      if (newValue != oldValue) alert('change 1')
    },
    'foo.bar.baz'(newValue, oldValue) {
      if (newValue != oldValue) alert('change 2')
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message }}</p>

  <input v-model="message">
  <input v-model="foo.bar.baz">

</div>