Question

仅当对象及其属性发生更改时，发送 axios http put 请求的逻辑方法是什么？

我发现我正在触发不必要的http请求，这浪费了服务器电源。我想限制为仅在页面加载时要发送的对象已从原始版本更新或更改的情况下触发。

我这样做的主要原因是我正在通过@blur对输入使用自动保存，因此http前面发生了很多操作！

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

方法editInput()每次都会触发axios put http请求。需要检查变更的方法吗？

您是否可能在created()钩子上克隆对象？然后使用某种方法进行比较...这是我尝试但失败的。

Answer 1

您始终可以使用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>

Answer 2

您可以按照以下说明深入了解自己的财产：

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

        },
        deep: true
    }
}

仅当Vue JS中的对象发生变化时，才如何发送axios http put请求？

2 个答案: