Question

这在 Vue 中未定义，使用 debounce 方法

2020-05-29

2101

javascript vue.js lodash

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

返回无法读取未定义的属性“$emit”

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

我在不使用箭头符号的情况下编写此 debounce 函数的方式是否存在语法错误？

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>