Bagaimana untuk menyelesaikan masalah bahawa data data tetapan vue tidak dikemas kini

Dengan pembangunan berterusan teknologi bahagian hadapan, Vue.js telah menjadi rangka kerja pilihan ramai jurutera bahagian hadapan. Walau bagaimanapun, dalam proses menggunakan Vue.js, kadangkala anda menghadapi masalah bahawa data tetapan Vue tidak dikemas kini. Artikel ini akan menganalisis masalah ini dan memberikan penyelesaian.

1. Penerangan khusus masalah

Dalam Vue.js, kami boleh menggunakan data untuk menyimpan data keadaan komponen. Biasanya, kita boleh mendapatkan atau menetapkan data dalam data melalui ini.$data.xxx. Selepas mengubah suai nilai data, Vue.js akan memaparkan semula halaman secara automatik untuk memaparkan data terkini. Tetapi kadangkala, kita akan mendapati bahawa nilai dalam data telah diubah, tetapi ia tidak dipaparkan pada halaman Sebab-sebab biasa adalah seperti berikut.

1. Jenis data tidak serasi

Jenis data dalam Vue.js sangat ketat Jika jenis data tidak serasi, data tidak akan dikemas kini. Sebagai contoh, jika anda mentakrifkan pembolehubah sebagai jenis rentetan, tetapi anda memberikan nilai jenis berangka kepadanya, maka ia tidak akan dikemas kini.

2. Had mekanisme responsif Vue.js

Mekanisme responsif Vue.js dilaksanakan berdasarkan Proksi ES6. Apabila kami mendapat atau menetapkan data dalam data melalui ini.$data.xx, Vue.js secara automatik akan memanggil kaedah dapatkan dan tetapkan Proksi untuk merealisasikan fungsi memantau perubahan data. Walau bagaimanapun, disebabkan isu keserasian Proksi, sesetengah penyemak imbas mungkin tidak menyokongnya, yang membawa kepada kegagalan kemas kini data.

3. Operasi tak segerak menjejaskan kemas kini data

Dalam Vue.js, kemas kini data ialah proses segerak. Tetapi kadangkala, kami mungkin melakukan beberapa operasi tak segerak sebelum data dikemas kini Jika operasi tak segerak ini tidak dikendalikan dengan betul, data mungkin tidak dikemas kini.

2. Penyelesaian

1. Semak jenis data

Untuk mengelakkan isu ketidakserasian jenis data, adalah disyorkan untuk menentukan jenis dengan jelas semasa menentukan pembolehubah. Apabila mengubah suai nilai pembolehubah, cuba pastikan jenis data adalah konsisten.

2. Selesaikan had mekanisme responsif Vue.js

Mengenai had mekanisme responsif Vue.js, kami boleh menyelesaikannya dengan cara berikut.

(1) Gunakan kaedah forceUpdate Vue.js untuk memaparkan semula komponen.

Sebagai contoh, terdapat data dalam komponen:

data() {
return {

message: 'Hello, Vue!',

};
},

Jika anda mengubah suai nilai mesej dalam kod, tetapi halaman tidak dikemas kini, anda boleh memaksa halaman untuk dipaparkan semula melalui kod berikut:

ini.$forceUpdate();

(2) Gunakan kaedah Vue.set atau this.$set untuk mengemas kini nilai data.

Vue.set ialah API yang disediakan oleh Vue.js, yang boleh digunakan untuk menambahkan sifat pada objek responsif.

Sebagai contoh, kami mempunyai data berikut:

data() {
return {

person: {
  name: 'Tom',
  age: 18,
},

};
},

Jika anda mengubah suai sifat objek orang itu dalam kod, tetapi halaman itu tidak dikemas kini, anda boleh mengemas kininya dengan kod berikut:

Vue.set(orang.ini, 'nama', 'Jerry ');

Atau gunakan kaedah ini.$set untuk mengemas kini:

ini.$set(orang.ini, 'nama', 'Jerry');

( 3) Pantau perubahan data dalam pilihan jam tangan

Vue.js menyediakan pilihan jam tangan, yang boleh digunakan untuk memantau perubahan data.

Sebagai contoh, kami mempunyai data berikut:

data() {
return {

message: 'Hello, Vue!',

};
},

Jika anda ingin melakukan beberapa operasi apabila nilai mesej berubah, anda boleh melakukannya dengan kod berikut:

tonton: {
mesej(newVal) {

console.log(newVal);

},
},

3 Selesaikan masalah operasi tak segerak yang menjejaskan kemas kini data

Jika operasi tak segerak dilakukan sebelum data dikemas kini, anda boleh menggunakan kaedah $nextTick. disediakan oleh Vue.js untuk menyelesaikan masalah. Kaedah $nextTick akan melaksanakan fungsi panggil balik selepas kitaran kemas kini DOM seterusnya, jadi ia boleh memastikan bahawa operasi tak segerak dilakukan selepas kemas kini data selesai.

Sebagai contoh, kami mempunyai data berikut:

data() {
return {

message: 'Hello, Vue!',

};
},

Jika anda ingin melakukan operasi tak segerak selepas mengubah suai nilai mesej, anda boleh menggunakan kod berikut untuk mencapainya:

this.message = 'Hello, World!';
this. $nextTick(() => ; {
// Laksanakan operasi tak segerak selepas kemas kini DOM
console.log('Operasi tak segerak selesai');
});

3 🎜>

Dalam Vue.js, jika terdapat masalah bahawa data tidak dikemas kini, anda boleh menyelesaikannya dengan kaedah berikut: semak sama ada jenis data adalah konsisten menggunakan forceUpdate, Vue.set atau ini.$ tetapkan kaedah yang disediakan oleh Vue.js untuk mengemas kini data Pantau perubahan data dalam pilihan jam tangan menggunakan kaedah $nextTick yang disediakan oleh Vue.js untuk menyelesaikan konflik antara kemas kini data dan operasi tak segerak. Melalui kaedah di atas, anda boleh menyelesaikan masalah data tetapan vue tidak dikemas kini.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah bahawa data data tetapan vue tidak dikemas kini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!