Mengapa Fungsi Anak Panah Memecahkan Sifat Pengiraan Vue, dan Bagaimana Saya Boleh Membaikinya?

Gunakan Fungsi Anak Panah dalam Sifat Pengiraan Vue: Menyelesaikan masalah

Dalam Vue, sifat yang dikira digunakan untuk memperoleh nilai reaktif daripada sifat lain. Walaupun fungsi anak panah boleh memudahkan kod dalam banyak senario, ia boleh menjadi masalah apabila digunakan dalam sifat yang dikira.

Kod Asal (Berfungsi):

new Vue({
  el: '#app',
  data: {
    turnRed: false,
    turnGreen: false,
    turnBlue: false
  },
  computed: {
    switchRed: function () {
      return { red: this.turnRed };
    },
    switchGreen: function () {
      return { green: this.turnGreen };
    },
    switchBlue: function () {
      return { blue: this.turnBlue };
    }
  }
});

Kod Ubahsuai (Tidak Berfungsi):

Namun, apabila anda ubah suai kaedah dalam sifat yang dikira menggunakan fungsi anak panah, tingkah laku berubah:

computed: {
  switchRed: () => {
    return { red: this.turnRed };
  },
  switchGreen: () => {
    return { green: this.turnGreen };
  },
  switchBlue: () => {
    return { blue: this.turnBlue };
  }
}

Penjelasan:

Punca isu ini ialah fungsi anak panah tidak mengikat ini kepada contoh Vue. Sebaliknya, mereka mewarisi konteks skop induk. Dalam kes ini, skop induk ialah skop global, jadi ini merujuk kepada objek tetingkap, bukannya contoh Vue yang dijangkakan. Akibatnya, nilai turnRed, turnGreen dan turnBlue kekal tidak dimulakan, membawa kepada warna yang tidak berubah.

Penyelesaian:

Untuk menyelesaikan isu ini dan menjadikan fungsi anak panah berfungsi dalam sifat yang dikira , Vue mengesyorkan menggunakan kaedah bind untuk mengikat ini secara eksplisit pada Vue contoh:

computed: {
  switchRed: () => {
    return { red: this.turnRed };
  }.bind(this),
  switchGreen: () => {
    return { green: this.turnGreen };
  }.bind(this),
  switchBlue: () => {
    return { blue: this.turnBlue };
  }.bind(this)
}

Atas ialah kandungan terperinci Mengapa Fungsi Anak Panah Memecahkan Sifat Pengiraan Vue, dan Bagaimana Saya Boleh Membaikinya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!