Vueのwatchオブジェクトのコールバック関数について話します.なぜ矢印関数ではありませんか.

Vueのwatchオブジェクトのコールバック関数がなぜ矢印関数ではないのかについて話します
本文の重点知識点一覧:

Vueのwatchオブジェクトのコールバック関数は矢印関数ではありません.

矢印関数のthisは、関数定義時に存在するオブジェクトを指し、通常の関数のthisは、関数実行時に存在するオブジェクトを指します.

関数のthisは問題を指します.

一緒に勉強しましょう...
矢印関数といえばよく知られていることではありませんが、矢印関数はES 6での関数の拡張であり、使い勝手がよく、矢印関数を特に知らない仲間もいるかもしれませんので、ここで例を挙げましょう.

//       
function add(a, b) {
    return a + b;
}

//         
const add = (a, b) => {
  return a + b;
}

//       
fucntion() {
  console.log('hello');
} 

//         
() => {
  console.log('hello');
}

矢印関数はコールバック関数を定義するのに非常に多く使用されますが、Vueのwatchオブジェクトのコールバック関数ではコールバック関数を使用できません.まず次の例を見てください.
コードは少し長いので、簡単に説明するとすべてのコードを見る必要はありません.次のコードは監視データaとbの変化を実現し、そのうちの1つが変化したときに対応するコールバック関数を実行してaとbの和を求め、23-30行に重点を置きます.
次のコードのwatchのコールバック関数は通常の関数であり、通常の関数については、関数のthisが関数の実行時に存在するオブジェクトを指すことを知っています.
したがって、ブラウザでaの値を変更すると(例えば、ブラウザのコンソールにvm.a=10と入力)、コード23行はVueオブジェクト(すなわち、コード14行が新たに作成するvmインスタンス)を印刷する.コード22行のfunction関数がvmオブジェクトで実行されると、ページは元の3から12に変化するからである.

  
  
  


  

    {{sum}}
  

  
    var vm = new Vue({
      el: "#app",
      data: {
        a: 1,
        b: 2,
        sum: 3
      },
      watch: {
        a: function() {
                    console.log(this);
          this.sum = this.a + this.b;
        },
        b: function() {
          this.sum = this.a + this.b;
        }
      }
    })
  

矢印関数をwatchのコールバック関数として用いた場合、コード21-29行を以下のコードに置き換えるとよい.

watch: {
  a: () => {
    console.log(this);
    this.sum = this.a + this.b;
  },
    b: () => {
      this.sum = this.a + this.b;
    }
}

ブラウザのコンソールでaの値を変更すると(たとえばコンソールにvm.a=10を入力する)、windowオブジェクトが印刷されているので、ページの内容も変化しません.
JSコードは、事前解析フェーズと実行フェーズに分けられ、事前解析フェーズで関数宣言に遭遇すると事前に事前解析が行われます.この場合、次のコードの矢印関数は、var vm = new Vue({...})というコードが事前解析フェーズでまだ実行されていないため、グローバルに定義されます.実行フェーズに達し、コンソールでaの値を変更すると、watchの次のコードの矢印関数が実行され始めます.このときの実行環境は、新しく作成されたvmオブジェクトです.しかし、矢印関数の場合、矢印関数のthisは、関数の実行時に存在するオブジェクトではなく定義時のオブジェクトを指します.これは、通常の関数とは大きく異なります.

  a: () => {
    console.log(this);
    this.sum = this.a + this.b;
  }

thisの指向性の問題についてまだよく分からない場合は、次の2つのブログを参照してください.

図文はJS中のthis値

を深く理解することと結びついている.

this原理(JavaScript)

を深く理解する
完了
ご叱正を歓迎します