时间戳

首页 > 解决方案 > Lodash 的 _.debounce() 在 Vue.js 中不起作用

javascript - Lodash 的 _.debounce() 在 Vue.js 中不起作用

问题描述

我正在尝试运行一个在 Vue.js 中调用query()的组件属性被修改时调用的方法。q

这失败了，因为this.query()未定义。This指的是我的组件的实例，但不知何故不包含方法。

这是我试图查看组件属性q并运行query()函数的相关代码部分：

methods: {
  async query() {
    const url = `https://example.com`;
    const results = await axios({
      url,
      method: 'GET',
    });
    this.results = results.items;
  },
  debouncedQuery: _.debounce(() => { this.query(); }, 300),
},
watch: {
  q() {
    this.debouncedQuery();
  },
},

错误：

类型错误：_this2.query 不是函数

debounce()如果我按如下方式编写调用，则TypeError: expected a function错误会在页面加载时更早出现。

debouncedQuery: _.debounce(this.query, 300),

标签： javascriptvue.jslodash

解决方案

问题来自您在 中定义的箭头函数的词法范围_.debounce。this绑定到您在其中定义它的对象，而不是实例化的 Vue 实例。

如果您将箭头功能切换为常规功能，则范围已正确绑定：

methods: {
  // ...
  debouncedQuery: _.debounce(function () { this.query(); }, 300)
}

推荐阅读