Vue手表[脂肪箭头范围]提供了错误的上下文

Question

我正在使用lodash来消除函数调用，但我想知道为什么我的this值不像我预期的继承范围。

这些是我的Vue组件的相关部分。

import debounce from 'lodash/debounce'; 

watch: { 
    query: debounce(() => { 
     this.autocomplete(); 
    }, 200, { 
     leading: false, 
     trailing: true 
    }), 

以上的情况下不工作，因为我this值不指向Vue的组件，而是这样表示的对象：

Object 
    __esModule: true 
    default: Object 
    __proto: Object 

是不是我的箭语法假设继承上下文this？

以下似乎工作正常：

query: debounce(function test() { 
    this.autocomplete(); 
}, 200, { 
    leading: false, 
    trailing: true 
}) 

有可能是这一个简单的答案，但我希望有人能帮助我在这里。

Answer 1

这只是一个额外的答案，可以解释箭头函数中对this的误解。

这是如何工作在箭头功能？

this在词汇函数中始终引用周围的范围。这可以是：

1. 最近的周边功能
2. 最近的周边模块
3. 全球范围

如果我们看一下你的代码，我们假设你正在使用ES6模块（从import/export语句判断）：

import debounce from 'lodash/debounce'; 

export default { 
    watch: { 
     query: debounce(() => { 
      this.autocomplete(); 
     }, 200, { 
      leading: false, 
      trailing: true 
     }), 
    } 
}; 

让我们通过李ST：

1.最近的周边功能

没有为您的箭头功能周围没有功能。一个例子是：

var obj = { 
    a: function() { 
     return() => { 
      console.log(this); 
     } 
    } 
}; 

obj.a()(); // `this` refers to `obj`, because `this` refers to `obj` in the surrounding function `a` 

2。最近的周边模块

由于我们在这种情况下属于（假）模块，因此this在模块范围内定义为伪模块对象（可能是babel或webpack对象？）。

Object 
    __esModule: true 
    default: Object 
    __proto: Object 

这似乎是因为Vue的结合默认

这是真的，这些属性，方法和事件，它是VUE的一个非常有用的功能。但是在这种情况下它并不能帮助我们，因为this不能被箭头函数覆盖，它总是指向周围的范围。

看一看下面链接的箭头功能有了更深的了解：http://exploringjs.com/es6/ch_arrow-functions.html#_variables-that-are-lexical-in-arrow-functions

Answer 2

见https://vuejs.org/v2/guide/instance.html#Properties-and-Methods

不要在实例属性或回调（如vm.$watch('a', newVal => this.myMethod()))使用箭头功能，正如箭头功能被绑定到父上下文，this不会是Vue的实例为你所期望以及this.myMethod将是不确定的

由于相同的限制适用于观察者，你必须使用这样的事情：

watch: { 
    query: function() { 
     return debounce(() => { 
      this.autocomplete(); 
     }, 
     200, 
     { 
      leading: false, 
      trailing: true 
     }); 
    } 
}