Vue.js和debounce(lodash/underscore)是否兼容？

Question

在回答我关于去抖动的问题后,我想知道vue.js和lodash/ underscore是否兼容此功能.答案中的代码

var app = new Vue({
  el: '#root',
  data: {
    message: ''
  },
  methods: {
    len: _.debounce(
      function() {
        return this.message.length
      }, 
      150 // time
    )
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
<script src="https://unpkg.com/underscore@1.8.3"></script> <!-- undescore import -->
<div id="root">
  <input v-model="message">Length: <span>{{ len() }}</span>
</div>

确实在持续输入时执行我的函数,但是当它在一些不活动后最终执行时,输入function()似乎是错误的.

启动上面代码后的一个实际示例:

1. 快速的字符序列,然后没有活动:

2. 添加了一个额外的字符(b),没有活动 - 长度更新(但错误地,见下文)

3. 使用Backspace快速删除所有字符:

4. 添加一个字符:

看起来函数是在最后一个值上运行的message.

可能是在用值实际更新之前_.debounce处理vue.js 吗？data<input>

笔记:

• 与两个测试lodash和underscore,具有相同的结果(用于debounce和throttle功能).
• 我还在JSFiddle上对它进行了测试,以防对SO片段产生一些干扰

Answer 1

这是@ saurabh版本的改进版本.

var app = new Vue({
  el: '#root',
  data: {
    message: '',
    messageLen: 0
  },
  methods: {
    updateLen: _.debounce(
      function() {
        this.messageLen = this.message.length
      }, 300)        
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
<script src="https://unpkg.com/underscore@1.8.3"></script> <!-- undescore import -->
<div id="root">
  <input v-model="message" v-on:keyup="updateLen">Length: <span>{{ messageLen }}</span>

</div>