Detaillierte Erläuterung des Vue-Listen-Renderings

Dieses Mal werde ich Ihnen eine detaillierte Erklärung zum Rendern von Vue-Listen und zu den Vorsichtsmaßnahmen für das Rendern von Vue-Listen geben. Hier ist ein praktischer Fall, werfen wir einen Blick darauf.

Mutationsmethoden ändern, wie der Name schon sagt, das ursprüngliche Array, das von diesen Methoden aufgerufen wird. Im Gegensatz dazu gibt es auch nicht mutierende Methoden wie filter(), concat() und Slice(). Diese verändern nicht das ursprüngliche Array, sondern geben immer ein neues Array zurück. Wenn Sie die Nicht-Mutationsmethode verwenden, können Sie das alte Array durch das neue Array ersetzen:

example1.items = example1.items.filter(function (item) {  return item.message.match(/Foo/)})
<div id="example">
  <div>
    <button @click="concat()">concat</button>
    <button @click="slice()">slice</button>
    <button @click="filter()">filter</button>
  </div>
  <ul>
    <li v-for="item in items">
      {{item.list}}
    </li>
  
  </ul>
</div>
<script>
  var example = new Vue({
    el:"#example",
    data:{
      items:[
        {list:5},
        {list:6},
        {list:7}
      
      ],
      addValue:{list:10}
    },
    methods:{
      concat(){
     this.items= this.items.concat(this.addValue)
      },
      slice(){
      this.items = this.items.slice(1)
      },
      filter(){
      this.items = this.items.filter(function(item,index,arr) {
          return (index > 0)
        })
      }
    
    }
  })

Der obige Vorgang führt nicht dazu, dass Vue das vorhandene DOM verwirft und die gesamte Liste neu rendert . Vue implementiert einige intelligente Heuristiken, um die Wiederverwendung von DOM-Elementen zu maximieren. Daher ist das Ersetzen des ursprünglichen Arrays durch ein Array mit denselben Elementen ein sehr effizienter Vorgang

Hinweise

AufgrundEinschränkungen von JavaScriptVue kann die folgenden geänderten Arrays nicht erkennen:

Wenn Sie den Index verwenden, um ein Element direkt festzulegen, zum Beispiel:

vm.items[indexOfItem] = newValue

Wann Wenn Sie ändern die Länge des Arrays, zum Beispiel:

vm.items.length = newLength

Um die erste Art von Problem zu lösen, können die folgenden beiden Methoden den gleichen Effekt wie vm.items[indexOfItem] = newValue erzielen und werden dies auch tun Trigger StatusUpdate:

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)
// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

Um die zweite Art von Problem zu lösen, können Sie splice verwenden:

example1.items.splice(newLength)

I Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Sie beherrschen die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie das -Tag, um persönliche Favoriten in HTML zu schreiben

HTML mit img Tag-Zeichnung

FAQ in HTML 1

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Vue-Listen-Renderings. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!