Mengapa Fungsi Anak Panah Memecahkan Sifat Dikira dalam Vue.js?

Menggunakan Fungsi Anak Panah dalam Sifat Vue Dikira

Dalam Vue.js, pengendalian data dan logik dalam sifat yang dikira adalah penting. Walau bagaimanapun, menggunakan fungsi anak panah dalam sifat yang dikira ini boleh mengakibatkan tingkah laku yang tidak dijangka.

Pada asalnya, menggunakan pengisytiharan fungsi tradisional untuk sifat yang dikira berfungsi seperti yang diharapkan, seperti yang dilihat dalam coretan kod ini:

computed: {
  switchRed: function() {
    return { red: this.turnRed };
  },
  // ... other computed properties
}

Walau bagaimanapun, bertukar kepada fungsi anak panah dalam sifat yang dikira membawa kepada masalah apabila perubahan warna berhenti berfungsi, walaupun nilainya dikemas kini dengan betul.

computed: {
  switchRed: () => {
    return { red: this.turnRed };
  },
  // ... other computed properties
}

Isu ini timbul kerana fungsi anak panah tidak mengikat konteks ini pada tika Vue yang mana sifat pengiraan ditakrifkan. Biasanya, sifat yang dikira mengikat ini pada contoh, membenarkan akses kepada data dan kaedah contoh. Walau bagaimanapun, dengan fungsi anak panah, ini mengekalkan konteks induknya, yang biasanya skop global dalam JavaScript dan bukan tika Vue.

Akibatnya, this.turnRed menjadi tidak ditentukan dalam fungsi anak panah, menyebabkan perubahan warna untuk gagal. Tingkah laku ini didokumenkan dalam dokumentasi Vue.js, yang menasihatkan agar tidak menggunakan fungsi anak panah misalnya sifat atau panggilan balik atas sebab ini.

Untuk menyelesaikan isu ini, kembali menggunakan pengisytiharan fungsi tradisional untuk sifat yang dikira, memastikan pengikatan ini dengan betul.

Atas ialah kandungan terperinci Mengapa Fungsi Anak Panah Memecahkan Sifat Dikira dalam Vue.js?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!