javascript - 这在Vue中是未定义的，使用debounce方法

Question

我知道对方法使用箭头语法会导致“this”不映射到 Vue 实例，但是在我的示例中我使用的是 lodash.debounce，据我所知我没有使用这里的箭头语法？

返回 Cannot read property '$emit' of undefined

methods: {
  onChange: debounce(function(el) {
    this.$emit('change', el.target.value)
  }, 1000)
}

我在没有箭头符号的情况下编写这个去抖动函数的方式是否存在语法错误？

Answer 1

您的代码应该可以正常工作。你能提供一些额外的背景信息吗？

轻微的改进:通常最好为每个实例创建去抖动函数，而不是在该组件的所有实例中共享一个。

methods: {
  onChange(e) {
    this.$emit('change', e.target.value)
  }
},

created() {
  this.onChange = _.debounce(this.onChange, 1000)
}

这是一个工作示例:

new Vue({
  el: '#app',
  
  data: {
    text: '',
  },
  
  created() {
    this.onClick = _.debounce(this.onClick, 1000)
  },
  
  methods: {
    onClick() {
      // this is not undefined here
      this.text += 'Debounced! ';
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.15/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button @click="onClick">Click Me</button>
  <p>{{ text }}</p>
</div>