Vue.js和debounce（lodash / underscore）是否兼容？ [英] Are Vue.js and debounce (lodash/underscore) compatible?

问题描述

2. 一个额外字符（ b ）添加，没有活动 - 长度更新（但错误地，见下文）

3. 快速删除Backspace中的所有字符：

4. 添加一个字符：

它看起来该函数是在消息的最后一个值上运行的。

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

注意：

• 使用 lodash 和进行测试下划线，结果相同（对于 debounce 和节流函数）。


• 我还在JSFiddle上测试了它，以防对SO片段产生一些干扰

解决方案

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

  var app = new Vue（{el：'＃root'，data：{message：''，messageLen：0}，方法：{updateLen：_.debounce（function（）{this.messageLen = this.mess age.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\" >< /脚本> <！ -  unexcore import  - >< div id =root> < input v-model =messagev-on：keyup =updateLen>长度：< span> {{messageLen}}< / span>< / div>  

Following an answer to my question on debouncing I am wondering if vue.js and lodash/underscore are compatible for this functionality. The code in the answer

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>

indeed holds on the execution of my function when there is continuous input, but when it is finally executed after some inactivity, the input for function() seems to be wrong.

A practical example after starting the code above:

1. quick sequence of characters, then no activity:

2. One extra character (b) added, and no activity -- the length is updated (but wrongly, see below)

3. Erase all the characters with Backspace in a quick sequence:

4. Add one character:

It looks like the function is ran on the last but one value of message.

Could it be that _.debounce handles the vue.js data before it is actually updated with the <input> value?

Notes:

• tested with both lodash and underscore, with the same results (for both debounceand throttle functions).
• I also tested it on JSFiddle in case there would be some interference with the SO snippet

解决方案

Here's an improved version of @saurabh's version.

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>

这篇关于Vue.js和debounce（lodash / underscore）是否兼容？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！