[Sprechen Sie über das Problem, dass die Vue-Projektansicht nicht aktualisiert wird]

Lassen Sie uns über das Problem sprechen, dass die Datenänderungsansicht im Vue-Projekt nicht aktualisiert wird.

Während der Arbeit stoßen wir manchmal auf einige Datenänderungen im Vue-Projekt, aber die Ansicht wird nicht aktualisiert.

Renderings:

Code wie folgt anzeigen:

<template>
  <div class="hello">
    输入的值inputValue：<input v-model="inputValue" @input="changeObjValue" />
    <div>绑定的值obj.a：{
   
   {obj.a}}</div>
    <div>绑定的值obj.o.m.n：{
   
   {obj.o.m.n}}</div>
    <div>绑定的值arr[2]：{
   
   {arr[2]}}</div>
    <button @click="setObjValue">set value</button><br />
    <button @click="setObjNValue">set obj.o.m.n value</button><br />
    <button @click="setArrValue">set arr[2]</button>
  </div>
</template>

<script>
export default {
      
      
  data(){
      
      
    return{
      
      
      inputValue: '',
      obj:{
      
      
        a:'',
        o:{
      
      
          m:{
      
      
            n: ''
          }
        }
      },
      arr: [1,2,3]
    }
  },
  created(){
      
      
    // this.obj = {}
  },
  methods:{
      
      
    changeObjValue(){
      
      
      this.obj.a = this.inputValue
      this.setObjValue()
    },
    setObjValue(){
      
      
      if(this.obj.a) this.obj.a += '1111->'
      if(!this.obj.a) this.obj.a = '1111->'
      // if(this.obj.o.m.n) this.obj.o.m.n += '2222->'
      // if(!this.obj.o.m.n) this.obj.o.m.n = '2222->'
      // if(this.arr[2]) this.arr[2] += '3333->'
      // if(!this.arr[2]) this.arr[2] = '3333->'
      //  this.arr[2] += '3333->'
      // this.$set(this.arr,2,'111')
      console.log('obj.a==== ',this.obj.a)
      console.log('obj.o.m.n==== ',this.obj.o.m.n)
      console.log('arr[2]==== ',this.arr[2])
    },
    setObjNValue(){
      
      
      // this.obj.o.m.n = '2222->'
      this.setObjValue()
    },
    setArrValue(){
      
      
      // this.obj.o.m.n = '2222->'
      this.arr[2] += '3333->'
      console.log('arr[2]==== ',this.arr[2])
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
      
      
  text-align: left;
  margin: 15% 20%;
  line-height: 40px;
}
</style>

Situationsanalyse:
Wann wird die Ansicht nicht aktualisiert (komplexe Datentypen wie Object, Arrary):

1. Wenn wir ein Array in Daten definieren und das entsprechende Element ändern.
2. Wenn wir ein Objekt in Daten definieren und dem Attribut in den Daten keinen Anfangswert zuweisen (wie z. B. in obj oben).
3. Wenn wir ein Objekt in Daten definieren, wurden den Attributen in den Daten Anfangswerte zugewiesen, aber wenn die Daten bearbeitet werden, gehen die Attribute verloren oder werden gelöscht.
   

Lösung:
So lösen Sie das Problem, dass die obige Ansicht nicht aktualisiert wird:

1. Die einfachste und unhöflichste Methode besteht darin, die definierten obj/arr-Daten als Ganzes zuzuweisen (achten Sie jedoch auf die Konsistenz der Attribute, um Attributverluste zu vermeiden, und wird für komplexe Datenstrukturen nicht empfohlen).
2. Vue stellt die $set-Methode bereit (aber die $set-Methode wird auch im Projekt verwendet, aber die Ansicht wird nicht aktualisiert. Zu diesem Zeitpunkt wird nach der Suche nach dem Problem festgestellt, dass den Daten entweder kein Anfangswert zugewiesen wurde , oder die Daten werden gerade verarbeitet. gehen verloren).
3. Bei Daten mit komplexen Datenstrukturen wie Verträgen und Formularen empfiehlt es sich, die Daten aufzuteilen und dann beim Übertragen der Daten die vom Backend gewünschten Daten zusammenzustellen und die Anfrage einzureichen.

Zusammenfassung:
Im Rahmen unserer Arbeit oder unseres Studiums müssen alle Arten von Daten sorgfältig verarbeitet werden und die Lesbarkeit der Daten sollte so weit wie möglich verbessert werden, um die Problemfindung zu erleichtern.
ps: Wenn das Projekt in Zukunft auf andere Situationen stößt, wird dieser Artikel weiterhin aktualisiert! ! ! Gerne können Sie auch Ergänzungen vornehmen.