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 
     }); 
    } 
}