Mengapakah \'ini\' Tidak Ditakrifkan dalam Komponen Vue.js dengan Fungsi Anak Panah?

Nilai Tidak Ditakrifkan Tidak Dijangka untuk "ini" dalam Komponen Vue.js

Apabila membina komponen Vue.js, mengakses "ini" dalam cangkuk kitaran hayat atau sifat yang dikira boleh menghasilkan hasil "tidak ditentukan" yang tidak dijangka. Fungsi anak panah, dilambangkan dengan sintaks "() => {}", ubah pengikatan "ini" di luar konteks contoh Vue.

Cangkuk Kitar Hidup

Dalam contoh yang disediakan:

mounted: () => {
  console.log(this); // logs "undefined"
},

Fungsi anak panah mengikat "ini" pada skop di luar Contoh Vue, yang membawa kepada penilaian "tidak ditentukan".

Sifat Dikira

Begitu juga, dalam sifat yang dikira:

computed: {
  foo: () => { 
    return this.bar + 1; 
  } 
}

Fungsi anak panah mencipta pengikatan yang berbeza untuk "ini", menghasilkan "Tidak boleh membaca 'bar' sifat undefined" ralat.

Penyelesaian

Untuk menyelesaikan isu ini dan memastikan rujukan yang betul kepada "ini" sebagai contoh Vue, pertimbangkan untuk menggunakan teknik berikut:

1. Fungsi Biasa: Gunakan sintaks fungsi biasa, seperti yang ditunjukkan oleh:

mounted: function () {
  console.log(this);
}

2. Catatan ringkas ECMAScript 5: Sebagai alternatif, anda boleh menggunakan trengkas fungsi ECMAScript 5:

mounted() {
  console.log(this);
}

Dengan menggunakan kaedah ini, anda boleh mewujudkan pengikatan "ini" yang betul dalam komponen Vue.js, memastikan kebolehcapaian kepada sifat dan kaedah komponen seperti yang dijangkakan.

Atas ialah kandungan terperinci Mengapakah \'ini\' Tidak Ditakrifkan dalam Komponen Vue.js dengan Fungsi Anak Panah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!