如何临时分析<input>字段？

Question

我想<input>在没有用户活动时分析字段的内容.

我将在下面举一个简单的例子(计算字符数)但实际分析如果非常昂贵,所以我想分批进行,当用户有一些不活动而不是每次更改绑定变量时都这样做.

简单分析的代码可以是

var app = new Vue({
  el: '#root',
  data: {
    message: ''
  },
  computed: {
    // a computed getter
    len: function() {
      // `this` points to the vm instance
      return this.message.length
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.js"></script>
<div id="root">
  <input v-model="message">Length: <span>{{len}}</span>
</div>

我的问题是function()每次改变都会被调用message.是否有内置机制来限制查询,或者是JS中这种问题的典型方法？

Answer 1

这按照预期的方式运作.正如文档中所述:

它将更新原始数据更改时依赖于计算属性的任何绑定

但有一种方法可以做到:

var app = new Vue({
  el: '#root',
  data: {
    message: '',
    messageLength:  0
  },
  methods: {
    len: _.debounce(
      function() {
        this.messageLength = this.message.length
      }, 
      300 // 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" v-on:keyup="len">Length: <span>{{ messageLength }}</span>
</div>

完整示例:https://vuejs.org/v2/guide/computed.html#Watchers

ps关于computed从vue作者同步的评论:https://forum-archive.vuejs.org/topic/118/throttle-computed-properties/3

关于和之间的差异的pps 经典文章.debouncethrottle