Data responsif Vue tidak bertindak balas

Apabila membangun dengan Vue.js, ciri yang paling biasa digunakan ialah pengikatan data reaktifnya. Ciri ini membolehkan pembangun mencapai penyegerakan automatik antara paparan dan data dengan mengisytiharkan dan mengikat data. Tetapi kadangkala, kami mungkin menghadapi masalah di mana data responsif Vue tidak bertindak balas, yang bermaksud kami mengubah suai data, tetapi paparan tidak dikemas kini. Ini adalah masalah biasa Seterusnya, mari kita bincangkan kemungkinan punca dan penyelesaian kepada masalah ini.

1. Jenis data tidak menyokong reaktif

Vue.js hanya boleh mengesan sifat yang wujud apabila data dimulakan. Oleh itu, jika terdapat beberapa jenis data tidak responsif, seperti Peta, Set, Simbol dan jenis objek lain yang dihantar sebagai prop komponen atau komponen induk ini, maka tidak ada cara untuk jenis data ini mencetuskan kemas kini responsif. Dalam kes ini, kemas kini perlu dicetuskan secara manual. Gunakan kaedah Vue.set atau Vm.$set untuk menetapkan sifat respons baharu secara manual, contohnya:

Vue.set(this.obj, 'propertyName', newValue)

atau

this.$set(this.obj, 'propertyName', newValue)

2. Vue tidak digunakan apabila menambah sifat/elemen baharu kepada objek atau tatasusunan .set atau ini.$set

Kami tahu bahawa apabila membangun dengan Vue.js, kami biasanya menggunakan kaedah Object.defineProperty untuk mendengar perubahan data, supaya paparan boleh diberikan semula apabila harta itu berubah. Akan ada masalah dengan penambahan sifat atau elemen baharu pada objek atau tatasusunan, kerana Vue.js tidak boleh menjejaki perubahannya secara automatik. Oleh itu, jika kita menambah atribut baharu pada objek atau menambah elemen baharu pada tatasusunan, kita perlu menggunakan kaedah Vue.set atau this.$set untuk menambah atribut atau elemen secara manual.

Sebagai contoh, kami mempunyai tatasusunan bernama data dan perlu menambah elemen baharu:

this.data.push(newElement); // 这种方式添加的元素不会响应式更新
或者
this.data[this.data.length] = newElement; // 该方式同样不会响应式更新

Cara yang betul ialah menggunakan ini.$set atau Vue.set:

this.$set(this.data, this.data.length, newElement);
或者
Vue.set(this.data, this.data.length, newElement);

Begitu juga, menambah sifat baharu pada objek adalah sama.

3. Objek atau tatasusunan menggunakan kaedah Object.freeze()

Jika objek atau tatasusunan dibekukan oleh kaedah Object.freeze(), Vue.js tidak boleh mengubahnya Sifat mengikat. Jadi, jika anda perlu menukar sifat ini, anda perlu menyah beku dan menambah sifat/elemen secara manual, contohnya:

let obj = Object.freeze( {
  key: 'value'
});
let newValue = 'new value';
obj.key = newValue; // 这种方式添加的属性不会响应式更新

let newObj = {[...obj]} // 这样也不会响应式更新

let unfrozenObj = {...obj}; // 解冻后再添加属性才会触发更新
unfrozenObj.key = newValue;

4. Kerap menukar sifat pada objek yang sama

Apabila berada pada objek yang sama Apabila atribut kerap ditukar, Vue.js mungkin gagal bertindak balas. Sebagai contoh, apabila menukar atribut jenis bool, anda harus menetapkan nilai atribut kepada false secara manual terlebih dahulu, dan kemudian menetapkannya kepada benar, seperti:

this.boolAttr = false;
this.boolAttr = true;

5. Bilangan tahap bersarang objek atau tatasusunan Terlalu dalam

Dalam Vue.js, kedalaman responsif maksimum ialah 10 tahap Jika bilangan lapisan bersarang objek atau tatasusunan terlalu dalam, Vue.js tidak akan dapat menjejakinya. perubahan harta dalaman. Pada masa ini, kita boleh mempertimbangkan untuk menggunakan sifat dan kaedah yang dikira untuk menyelesaikan masalah ini Sebagai contoh:

data: {
  deepChild: {
    deepChild1: {
      ...
    }
  }
},

computed: {
  deepChildProp: function() {
    return this.deepChild.deepChild1....;
  }
},

Secara ringkasnya, di atas adalah beberapa situasi di mana data responsif Vue tidak bertindak balas. Apabila kita menangani masalah yang sama, kita perlu menentukan punca masalah itu terlebih dahulu dan kemudian memilih penyelesaian yang sepadan. Kami boleh menggunakan alat yang disediakan oleh Vue.js untuk mendiagnosis masalah yang berterusan, atau melaksanakan kemas kini yang tidak dijangka secara manual atau memanipulasi data dalam sifat dan kaedah yang dikira. Apabila menggunakan Vue.js, kita perlu memahami sepenuhnya prinsip pengikatan data responsifnya untuk menulis kod yang cantik dan cekap.

Atas ialah kandungan terperinci Data responsif Vue tidak bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!