Vue.js ライフサイクル フックと計算プロパティで「this」がわかりにくくなるのはなぜですか?

Vue.js の詳細: 「this」がとらえどころのない理由を理解する

Vue.js の領域では、「this」にアクセスしようとすると独特の困難が生じます。ライフサイクルフックと計算されたプロパティ内。 Vue インスタンスへの簡単な参照のように見えるものは、多くの場合、開発者を困惑させ、複雑なエラーや未定義の値につながります。

未定義の深淵への突入

アロー関数を使用する場合() => 「mounted」などのライフサイクル フックや「foo」などの計算プロパティ内で {} を使用すると、「this」の値がわかりにくくなり、コンソール上に「未定義」というイライラする光景が残ります。

犯人: アロー関数とバインドされたコンテキスト

アロー関数はその字句スコープを継承します。つまり、周囲のコンテキストからの "this" バインディングを保持します。 Vue.js コンポーネントの場合、このコンテキストは Vue インスタンス自体とは異なります。その結果、コンポーネント メソッドで定義されたアロー関数内から "this" を参照すると、未定義と評価されます。

従来の関数の採用

この問題を修正するには、従来の関数を選択してください。 JavaScript 関数または ECMAScript 5 関数の短縮形。これらのアプローチは、「this」を囲んでいるコンテキスト (Vue.js コンポーネントの場合は Vue インスタンス自体) にバインドします。

通常の関数でラップ:

mounted: function () {
  console.log(this); // Logs the Vue instance
}

簡略化された省略構文:

mounted() {
  console.log(this); // Still logs the Vue instance
}

結論

アロー関数のニュアンスと "this" のバインドを把握することは、 Vue.js コンポーネントの内部動作を理解します。通常の関数構文または短縮関数構文を採用することで、Vue インスタンスのコンテキスト内で自信を持って「this」にアクセスでき、厄介な未定義エラーをコーディング領域から効果的に排除できます。

以上がVue.js ライフサイクル フックと計算プロパティで「this」がわかりにくくなるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。