Rumah >hujung hadapan web >tutorial js >Mengapakah \'ini\' Menjadi Tidak Ditakrifkan dalam Cangkuk Kitaran Hayat Vue.js dan Sifat Dikira?

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

DDD
DDDasal
2024-11-28 04:58:10829semak imbas

Why Does

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn