Mengapakah Anak Panah Berfungsi dalam Sifat Pengiraan Vue Kadangkala Menyebabkan Gelagat Tidak Dijangka?

Menggunakan Fungsi Anak Panah dalam Sifat Pengiraan Vue: Memahami Perangkap

Dalam Vue.js, fungsi anak panah boleh digunakan untuk memudahkan sintaks sifat yang dikira. Walau bagaimanapun, menggunakan fungsi anak panah dalam sifat yang dikira boleh membawa kepada tingkah laku yang tidak dijangka jika tidak digunakan dengan betul.

Takrifan Fungsi yang Salah

Pertimbangkan coretan kod Vue berikut:

computed: {
  switchRed: () => {
    return { red: this.turnRed }
  },
  switchGreen: () => {
    return { green: this.turnGreen }
  },
  switchBlue: () => {
    return { blue: this.turnBlue }
  }
}

Apabila menggunakan fungsi anak panah dalam sifat yang dikira, adalah penting untuk menyedari tingkah laku skop mereka. Fungsi anak panah tidak mengikat kata kunci ini pada contoh Vue. Sebaliknya, mereka mewarisi pengikatan ini daripada konteks sekeliling, yang dalam kes ini ialah skop global komponen Vue.

Akibat Takrifan Salah

Akibatnya daripada takrif fungsi yang salah, kata kunci ini dalam sifat yang dikira tidak merujuk kepada contoh Vue, sebaliknya kepada Vue.js global contoh. Ini membawa kepada ralat rujukan yang tidak ditentukan untuk sifat turnRed, turnGreen dan turnBlue. Akibatnya, sifat yang dikira akan mengembalikan objek kosong dan tingkah laku perubahan warna tidak akan berfungsi seperti yang diharapkan.

Definisi Fungsi Betul

Untuk menyelesaikan isu ini, kita perlu untuk mengikat konteks ini secara eksplisit kepada contoh Vue. Untuk melakukan ini, kami boleh menggunakan sintaks fungsi tradisional:

computed: {
  switchRed: function() {
    return { red: this.turnRed }
  },
  switchGreen: function() {
    return { green: this.turnGreen }
  },
  switchBlue: function() {
    return { blue: this.turnBlue }
  }
}

Dengan menggunakan sintaks fungsi tradisional, kami memastikan bahawa kata kunci ini dalam sifat yang dikira merujuk kepada tika Vue. Ini membenarkan sifat yang dikira untuk mengakses dan memanipulasi data tika Vue seperti yang dimaksudkan.

Nota Penting

Adalah penting untuk mematuhi panduan dokumentasi Vue.js apabila menggunakan anak panah fungsi. Menurut dokumentasi, "Jangan gunakan fungsi anak panah pada sifat contoh atau panggil balik (cth. vm.$watch('a', newVal => this.myMethod())). Oleh kerana fungsi anak panah terikat pada konteks induk , ini bukan contoh Vue seperti yang anda jangkakan dan this.myMethod akan tidak ditentukan."

Atas ialah kandungan terperinci Mengapakah Anak Panah Berfungsi dalam Sifat Pengiraan Vue Kadangkala Menyebabkan Gelagat Tidak Dijangka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!