Mengapa Vue tidak boleh bertindak balas terhadap perubahan tatasusunan?

Vue.js ialah rangka kerja bahagian hadapan yang sangat popular hari ini. Ia menggunakan pengikatan data dua hala untuk memaparkan dan mengemas kini data. Dalam Vue.js, kami boleh mengemas kini paparan secara automatik melalui perubahan dalam data, yang juga merupakan ciri penting Vue.js. Walau bagaimanapun, dalam Vue.js, kadangkala kita mungkin menghadapi masalah pelik, itulah sebabnya Vue.js tidak dapat bertindak balas terhadap perubahan dalam tatasusunan. Seterusnya, kita akan meneroka punca masalah ini dan cara menyelesaikannya.

Mengapa Vue tidak boleh bertindak balas terhadap perubahan tatasusunan

Dalam Vue.js, apabila kita menukar elemen tatasusunan, Vue.js boleh mengesan perubahan itu. Walau bagaimanapun, apabila kami menggunakan kaedah tatasusunan untuk menukar tatasusunan, seperti push(), pop(), shift(), unshift(), splice(), dll., Vue.js tidak dapat mengesan perubahan dalam tatasusunan ini masalah Sebabnya adalah disebabkan oleh pengehadan JavaScript.

Dalam Javascript, semua operasi tatasusunan adalah berdasarkan kaedah objek Array.prototaip primitif. Kaedah ini termasuk push(), pop(), shift(), unshift(), splice(), dsb. Kaedah ini semuanya kaedah tatasusunan primitif Mereka boleh menukar kandungan tatasusunan, tetapi mereka tidak boleh menukar rujukan tatasusunan. Ini bermakna apabila kita menggunakan kaedah ini untuk mengubah tatasusunan, rujukan kepada tatasusunan tidak berubah. Vue.js bergantung pada mod pemerhati untuk melaksanakan responsif data Apabila rujukan tatasusunan tidak berubah, Vue.js tidak dapat mengesan perubahan dalam tatasusunan.

Sebagai contoh, kami mentakrifkan tatasusunan:

data() {
  return {
    list: [1, 2, 3]
  }
}

Apabila kami menambah elemen pada tatasusunan melalui kod berikut:

this.list.push(4)

Vue.js tidak dapat mengesan tatasusunan berubah. Inilah sebabnya Vue.js tidak boleh bertindak balas terhadap perubahan tatasusunan. Tetapi jangan risau, Vue.js menyediakan kami beberapa cara untuk menyelesaikan masalah ini.

Cara menyelesaikan masalah yang Vue tidak dapat bertindak balas terhadap perubahan tatasusunan

Vue.js menyediakan beberapa kaedah untuk menyelesaikan masalah perubahan tatasusunan Kaedah ini termasuk:

1. Gunakan kaedah Vue .set()

Vue.js menyediakan kaedah Vue.set(), yang boleh digunakan untuk menambah atribut baharu pada objek responsif dan membenarkan Vue.js mengesannya perubahan dalam harta ini. Kita boleh menggunakan kaedah Vue.set() untuk menyelesaikan masalah perubahan tatasusunan, contohnya:

Vue.set(this.list, 3, 4)

Kaedah ini akan menambah elemen baharu pada senarai tatasusunan dan Vue.js boleh mengesan perubahan dalam tatasusunan .

2. Gunakan kaedah splice()

Kita boleh menggunakan kaedah splice() tatasusunan untuk menukar tatasusunan Dengan cara ini Vue.js boleh mengesan perubahan dalam tatasusunan itu. Contohnya:

this.list.splice(3, 0, 4)

Kaedah ini akan memasukkan elemen 4 ke dalam kedudukan keempat senarai tatasusunan dan Vue.js boleh mengesan perubahan dalam tatasusunan.

3. Tambah tatasusunan baharu pada tatasusunan

Kita boleh menambah tatasusunan baharu pada tatasusunan Kaedah ini juga boleh menyelesaikan masalah perubahan tatasusunan, contohnya:

this.list = this.list.concat([4])

Hasilnya ialah untuk mencipta tatasusunan baharu dan kemudian menambah tatasusunan pada tatasusunan asal. Vue.js boleh mengesan perubahan dalam tatasusunan.

Perlu diingat bahawa Vue.js boleh mengesan perubahan pada elemen dalam tatasusunan, tetapi Vue.js tidak dapat mengesan penetapan keseluruhan tatasusunan. Oleh itu, anda harus cuba menggunakan kaedah splice() atau Vue.set() apabila mengubah suai elemen tatasusunan.

Kesimpulan

Dalam Vue.js, masalah tidak dapat bertindak balas kepada perubahan tatasusunan disebabkan oleh pengehadan JavaScript. Vue.js menyediakan beberapa kaedah untuk menyelesaikan masalah perubahan tatasusunan, termasuk menggunakan kaedah Vue.set(), kaedah splice() dan menambah tatasusunan baharu pada tatasusunan. Melalui kaedah ini, kita boleh menyelesaikan masalah perubahan tatasusunan yang tidak dapat bertindak balas dengan mudah.

Atas ialah kandungan terperinci Mengapa Vue tidak boleh bertindak balas terhadap perubahan tatasusunan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!