Javascript Vuejs：检测计算值上的更改事件

目标

我只想检测到对

searchTerms

的更改事件

问题

观察者当前在每次按键时都会触发，但我不希望有那么多的事件

上下文（）

名称
短代码
地址
呼叫者
电话
客户：{{customer | json}
searchTerms:{{searchTerms|json}
新Vue({
el:“#应用程序”，
数据：{
客户：{
名字：“唐尼”，
电话：''，
调用方：“”，
地址：''，
短代码：“做”
}
},
计算：{
searchTerms:function（）{
设项={}；
_.forOwn（this.customer，（值，键）=>{
如果（value.length>=3）{
术语[键]=值；
}
});
退货条款；
}
},
观察：{
“searchTerms”：函数（）{
if（u.isEmpty（this.searchTerms））{
返回；
}
警报（“searchTerms已更改”）；
}
}
});

您可以使用，由提供。它创建一个取消公告的函数，该函数将延迟调用func，直到上次调用取消公告的函数后等待毫秒。去抖动用于限制我们执行Ajax请求和其他昂贵操作的频率

您可以在一个单独的方法中添加您不想经常调用的内容，并在一个

..debounce

中调用这些操作，如下所示：

您可以更改<代码> SETTIMEOUT中的延迟作为您的要求。

---

查找更新的fiddle。

计算属性

searchTerms

每次运行时都会创建一个新对象。这意味着对

searchTerms

的引用发生了变化，导致观察者开火

您只希望观察者在其中一个值发生更改时触发。最简单的方法是观看字符串化版本的

searchTerms

，而不是对象

以下是更新的小提琴：

下面是代码片段（最好将代码保存在stackoverflow中，而不是外部站点）：

newvue({
el:“#应用程序”，
数据：{
客户：{
名字：“唐尼”，
电话：''，
调用方：“”，
地址：''，
短代码：“做”
}
},
计算：{
searchTerms:function（）{
设项={}；
_.forOwn（this.customer，（值，键）=>{
如果（value.length>=3）{
术语[键]=值；
}
});
退货条款；
},
searchTermsString:function（）{
返回JSON.stringify（this.searchTerms）；
}
},
观察：{
“SearchTermsString-Gified”：函数（）{
if（u.isEmpty（this.searchTerms））{
返回；
}
警报（“searchTerms已更改”）；
}
}
});

名称
短代码
地址
呼叫者
电话
客户：{{JSON.stringify（客户，null，2）}
searchTerms:{{JSON.stringify（searchTerms，null，2）}
您可以检查计算属性函数中的值是否已直接更改。

由于您正在生成对象，因此需要使用
.isEqual
方法来测试值是否已更改。您还需要存储以前的值以进行比较


newvue({
el:“#应用程序”，
数据：{
客户：{
名字：“唐尼”，
电话：''，
调用方：“”，
地址：''，
短代码：“做”
},
previousSearchTerms:空
},
计算：{
searchTerms:function（）{
设项={}；
_.forOwn（this.customer，（值，键）=>{
如果（value.length>=3）{
术语[键]=值；
}
});
if（this.previousSearchTerms&&！\u.isEqual（terms，this.previousSearchTerms））{
警惕（“我变了！”）；
}
this.previousSearchTerms=术语；
退货条款；
}
}
});
label{font-weight:bold；}
.模型{
背景：#eee；
保证金：1rem；
填充：1rem；
}

名称
短代码
地址
呼叫者
电话
客户：{{customer | json}
searchTerms:{{searchTerms|json}

<template>
<div id="app">
  <table class="table">
    <tr>
      <td><label>Name</label></td>
      <td><input class="form-control" v-model="customer.name" autofocus></td>
    </tr>
    <tr>
      <td><label>Short Code</label></td>
      <td><input class="form-control" v-model="customer.shortCode"></td>
    </tr>
    <tr>
      <td><label>Address</label></td>
      <td><input class="form-control" v-model="customer.address"></td>
    </tr>
    <tr>
      <td><label>Caller</label></td>
      <td><input class="form-control" v-model="customer.caller"></td>
    </tr>
    <tr>
      <td><label>Phone</label></td>
      <td><input class="form-control" v-model="customer.phone"></td>
    </tr>
  </table>

  <div class="models">
    <pre><strong>customer:</strong> {{ customer | json }}</pre>
    <pre><strong>searchTerms:</strong> {{ searchTerms | json }}</pre>
  </div>
</div>
</template>

<script>
new Vue({
  el: '#app',
  data: {
    customer: {
      name: 'Donnie',
      phone: '',
      caller: '',
      address: '',
      shortCode: 'DO'
    }
  },

  computed: {
    searchTerms: function() {
      let terms = {};

      _.forOwn(this.customer, (value, key) => {
        if (value.length >= 3) {
          terms[key] = value;
        }
      });

      return terms;
    }
  },

  watch: {
    'searchTerms': function() {
      if (_.isEmpty(this.searchTerms)) {
        return;
      }

      alert('searchTerms Changed');
    }
  }
});
</script>

  methods: {
    // This is where the debounce actually belongs.
    expensiveOperation: _.debounce(function () {
      this.isCalculating = true
      setTimeout(function () {
                alert('searchTerms Changed');
      }.bind(this), 1000)
    }, 500)
  }