javascript - 如何临时化 <input> 字段的分析？

Question

我想分析一个 <input> 的内容没有用户事件时的字段。

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

直接分析的代码可以是

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

按预期的方式工作。正如文档中所说:

It will update any bindings that depend on computed property when the original data changes

但是有一种方法可以做到:

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://v2.vuejs.org/v2/guide/computed.html#Watchers

附注来自 vue 作者的关于 computed 正在同步的评论:https://forum-archive.vuejs.org/topic/118/throttle-computed-properties/3

p.p.s Classics article debounce 和 throttle 的区别