Vue watch [fat arrow scope]間違ったコンテキストを提供しています

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

のは、Li見ていきましょう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オブジェクトですか？）として定義されています。 Vueのは本当デフォルト

することにより、これらのプロパティ、メソッド、およびイベントを結合し、それはVUEの非常に便利な機能ですので、

Object 
    __esModule: true 
    default: Object 
    __proto: Object 

は、それはそうです。しかし、この場合は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 
     }); 
    } 
}