vue: あれやこれやの理解

私たちが会社に入ると、非常に一般的な状況に気づくでしょう。つまり、以前の開発者はよくこのような変数を使用します。つまり、自己...

that と self が使用されるのはなぜですか? これはエディターが理解していることです。this は現在のオブジェクトを指しますが、that と selfは一時変数です。this を一時的に保存するために、どのように呼び出しても使用できるようにします。 this と vue の場合、this の値が変更されず、常に vue インスタンスであることが保証されます。
次に、ケースを使用して結果を簡単に示します。

mounted () {
    this.this_that()
},
methods: {
    this_that () {
        const that = this
        console.log('this1', this)
        setTimeout(function () {
            console.log('this2', this)
            console.log('that3', that)
        }, 1000)
        setTimeout(() => {
            console.log('this4', this)
            console.log('that5', that)
        }, 1500)
    },
}

出力結果:

分析：

this1 -- this1 は理解しやすいです。これは、指定された vue インスタンスである必要があります。

this2 -- this2 は window オブジェクトを出力します。なぜですか? まず、通常の関数 function(){} を使用します。タイマーは window 関数によって呼び出されるので、タイマーはウィンドウを指します。

that3 -- that3 はなぜ vm インスタンスを出力するのでしょうか? それは、タイマーの外で that 変数を定義しており、タイマーに出力されるのは変数の値だけであり、this のポインターではないからです。

this4 -- なぜ this2 と違うのでしょうか? ここのタイマーはアロー関数を使用していることに注意してください。アロー関数の this は上位レベルでそれを呼び出すオブジェクトを指しているため、ここでは this は vue インスタンスを指しています。

that5 -- that3 と同じ

これで理由がわかるはずです。事前に this を保存するために that を使用しているため、このロジックでは、どのように呼び出しても、最終的には vue インスタンスの this を使用できるため、次のポインティングの問題を考慮する必要はありません。これを使うと便利です。

おすすめ