Apakah yang perlu saya lakukan jika vue tidak memuat semula halaman semasa?

藏色散人
Lepaskan: 2023-01-05 15:17:58
asal
3433 orang telah melayarinya

Penyelesaian untuk vue tidak memuat semula halaman semasa ialah: 1. Tentukan ambang dalam data, dengan kod seperti "this.show = false;setTimeout(() => {this.show = true} ,0 )"; 2. Selepas data diproses, gunakan "this.$froceUpdate()" untuk memaksa muat semula; 3. Selepas pemprosesan data selesai, lakukan operasi tetapan semula data; 4. Gunakan "this.$set" kaedah global kemas kini data, dsb.

Apakah yang perlu saya lakukan jika vue tidak memuat semula halaman semasa?

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi Vue 3, komputer Dell G3.

Apakah yang perlu saya lakukan jika vue tidak memuat semula halaman semasa?

Halaman kemas kini data dalam projek vue tidak dimuat semula

Situasi ini boleh dibahagikan kepada banyak jenis tetapi sebabnya ialah versi di bawah vue3 .0 tidak boleh Memantau perubahan dalam objek (termasuk tatasusunan dan objek Apabila data berubah, mekanisme penyegaran Vue tidak dapat mengesan perubahan data, jadi kami perlu mencapai tujuan penyegaran halaman melalui pelbagai proses dalam proses aplikasi sebenar).

1 Ini adalah penyelesaian yang mudah dan kasar, iaitu untuk menyusun semula dan melukis semula halaman selepas kemas kini data selesai Walau bagaimanapun, penggunaan halaman akan meningkat secara mendadak dengan cara ini gunakannya sebagai pilihan terakhir. Kaedah pelaksanaan khusus adalah seperti berikut:

Tentukan ambang dalam data, seperti tunjukkan, pada mulanya benar; 🎜>

2 Selepas data diproses, gunakan ini.$froceUpdate() untuk menyegarkan semula paksa

3 reset operation , tetapi perlu diperhatikan bahawa kaedah ini hanya sah untuk objek (ujian peribadi tatasusunan tidak sah. Jika ada rakan yang boleh mendapatkannya, sila tinggalkan mesej dan izinkan saya menyembahnya, hehe), dan kaedah ini tidak sesuai untuk objek dengan nilai utama sebagai rujukan Jenis sumber data (untuk kaedah ini, saya secara peribadi berpendapat bahawa templat untuk memaparkan data jenis rujukan boleh dirangkumkan dalam komponen yang berasingan, dan kemudian data boleh dimuat semula dalam komponen ini. . Sudah tentu, pemantauan perubahan data adalah penting Kaedah ini belum diuji , Secara logiknya, tidak ada masalah)

this.show = false;
setTimeout(() => {
 
  this.show = true
 
},0)
Salin selepas log masuk

4 kaedah untuk mengemas kini data; di sini kita akan bercakap tentang mekanisme pengikatan data vue apabila Semasa proses membuat halaman, templat HTML hanya akan mengikat data yang telah ada dalam data apabila ia dibuat pada mulanya data selepas halaman dibuat, data akan dikemas kini, tetapi halaman tidak akan dimuat semula ini.$set (sumber data, kunci data untuk dilampirkan/indeks dalam data sumber, data baharu) Kaedah ini secara rasmi. disediakan oleh Vue untuk menambahkan data, dan boleh mencapai penyegaran halaman!

5. Untuk data tatasusunan, sebab biasa halaman tidak dimuat semula selepas mengubah suai data ialah:

let temp = this.data;
this.data = null;
this.data = temp
Salin selepas log masuk

Mengubah suai elemen tatasusunan melalui subskrip tatasusunan

  • Ubah suai panjang tatasusunan

  • Kemudian apabila mengubah suai data tatasusunan, kita harus menggunakan push(), pop(), shift(), unshift(), splice( ), Gunakan kaedah asli seperti sort() dan reverse() untuk memanipulasi data, kerana Vue boleh mengesan secara langsung perubahan dalam data tatasusunan yang disebabkan oleh kaedah ini.

    6 Sebab paling asas mengapa data tidak dimuat semula adalah kerana Vue berpendapat bahawa struktur templat belum dikemas kini, jadi ia tidak akan menghasilkan dom maya baharu, jadi kami boleh menambah dom maya baharu pada dom yang perlu dikemas kini, yang akan berlaku selepas operasi tamat, jadi ia akan disegarkan (ini adalah kemahiran baru yang saya pelajari baru-baru ini, saya akan menambah lagi).
Pembelajaran yang disyorkan: "

tutorial video vue

"

Atas ialah kandungan terperinci Apakah yang perlu saya lakukan jika vue tidak memuat semula halaman semasa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
vue
sumber:php.cn
Kenyataan Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan