Mengapakah \'ini\' Menjadi Tidak Ditakrifkan dalam Cangkuk Kitaran Hayat Vue.js dan Sifat Dikira?

VueJS: "this" Undefined in Lifecycle Hooks and Computed Properties

Dalam Vue.js, anda mungkin menghadapi situasi di mana mengakses "ini " kata kunci dalam cangkuk kitaran hayat atau sifat yang dikira mengembalikan "tidak ditentukan." Ini berlaku apabila fungsi anak panah digunakan.

Punca:

Fungsi anak panah () => {} mengikat kata kunci "ini" pada konteks di luar tika Vue. Ini bermakna "ini" dalam fungsi anak panah merujuk kepada skop induk, bukan kejadian Vue itu sendiri.

Contoh 1:

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

Dalam contoh ini, fungsi anak panah yang digunakan untuk cangkuk "dipasang" tidak mengikat "ini" pada Vue instance.

Contoh 2:

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

Di sini, sifat yang dikira menggunakan fungsi anak panah, yang menyebabkan rujukan kepada "this.bar" dinilai kepada tidak ditentukan , mengakibatkan ralat "Tidak boleh membaca 'bar' harta undefined."

Penyelesaian:

Untuk menyelesaikan isu ini dan mengakses rujukan yang betul kepada "ini," gunakan fungsi biasa atau trengkas ES5:

Fungsi Biasa:

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

ES5 Pendek kata:

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

Dengan menggunakan pendekatan ini, anda memastikan bahawa "ini" merujuk kepada tika Vue dalam cangkuk kitaran hayat dan sifat yang dikira.

Atas ialah kandungan terperinci Mengapakah \'ini\' Menjadi Tidak Ditakrifkan dalam Cangkuk Kitaran Hayat Vue.js dan Sifat Dikira?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!