当值被方法本身改变时，有没有办法停止触发 vuejs watch 方法？

Question

watch: {
        alert() {
          setTimeout(() => {
            this.alert = "";
          }, 4000);
        }
      }

在这里，警报方法首先由 DOM 触发，当该方法更改值时再次触发。有什么办法可以停止重复吗？

我的目标是检查“警报”的值是否已更改，如果已更改，我想在 4 秒后重置该值并计算更改了多少次。

Answer 1

按照 Roy J 的建议，尝试change在 DOM 上放置一个处理程序，而不是使用一个观察程序。

new Vue({
  el: '#app',

  data() {
    return {
      alert: '',
      alertCounter: 0,

      resetTimeoutId: null,
      resetTimeoutDelay: 1000, // 4000
    }
  },

  methods: {
    reset() {
      this.incrementAlertCounter()
      this.handlePreviousResetTimeout()
      this.resetTimeoutId = setTimeout(() => {
        this.alert = ''
      }, this.resetTimeoutDelay)
    },

    handlePreviousResetTimeout() {
      if (!this.resetTimeoutId) return
      clearTimeout(this.resetTimeoutId)
    },

    incrementAlertCounter() {
      this.alertCounter += 1
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input v-model="alert" type="text" @change="reset">
  <span>{{ alertCounter }}</span>
</div>