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

VueJS: Menyelesaikan Isu Tidak Ditakrifkan "ini"

Fungsi anak panah boleh menjadi perangkap dalam VueJS, yang membawa kepada nilai yang tidak ditakrifkan yang tidak dijangka. Ini kerana fungsi anak panah mewarisi konteks induknya, dan bukannya mengikat pada tika Vue.

Cangkuk Kitar Hayat

Apabila menggunakan fungsi anak panah dalam cangkuk kitar hayat seperti dipasang, ini tidak merujuk kepada contoh Vue. Sebaliknya, ia merujuk kepada konteks induk, yang biasanya merupakan elemen HTML atau komponen Vue yang mencetuskan cangkuk yang dipasang.

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

Sifat Berkomputer

Fungsi anak panah dalam sifat yang dikira juga membawa kepada nilai yang tidak ditentukan. Memandangkan mereka mewarisi konteks induk, ini tidak merujuk kepada tika Vue.

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

Ini mengakibatkan ralat "Uncaught TypeError: Cannot read property 'bar' of undefined".

Penyelesaian

Untuk menyelesaikannya, gunakan fungsi biasa atau pintasan fungsi ECMAScript 5 dan bukannya fungsi anak panah:

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

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

Dengan menggunakan kaedah ini, anda boleh memastikan bahawa ini sentiasa merujuk kepada tika Vue, memberikan gelagat yang dijangkakan dalam cangkuk kitaran hayat dan sifat yang dikira.

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