Explication détaillée du rendu de la liste Vue

Cette fois, je vais vous donner une explication détaillée du rendu de la liste Vue et quelles sont les précautions pour le rendu de la liste Vue Voici un cas pratique, jetons un oeil.

Les méthodes de mutation, comme leur nom l'indique, modifieront le tableau d'origine appelé par ces méthodes. En revanche, il existe également des méthodes non mutantes, telles que filter(), concat() et slice(). Ceux-ci ne modifient pas le tableau d'origine, mais renvoient toujours un nouveau tableau. Lorsque vous utilisez la méthode de non-mutation, vous pouvez remplacer l'ancien tableau par le nouveau tableau :

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)
        })
      }
    
    }
  })

L'opération ci-dessus n'entraînera pas la suppression du DOM existant par Vue et le rendu de la liste entière. . Vue implémente des heuristiques intelligentes pour maximiser la réutilisation des éléments DOM, donc remplacer le tableau d'origine par un tableau contenant les mêmes éléments est une opération très efficace

Notes

En raison deLimitations de JavaScript, Vue ne peut pas détecter les tableaux modifiés suivants :

Lorsque vous utilisez l'index pour définir directement un élément, par exemple :

vm.items[indexOfItem] = newValue

Quand Lorsque vous modifiez la longueur du tableau, par exemple :

vm.items.length = newLength

Afin de résoudre le premier type de problème, les deux méthodes suivantes peuvent obtenir le même effet que vm.items[indexOfItem] = newValue, et permettront également trigger StatusMise à jour:

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

Afin de résoudre le deuxième type de problème, vous pouvez utiliser splice:

example1.items.splice(newLength)

I Je crois que vous avez lu le cas dans cet article. Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser la balise 3499910bf9dac5ae3c52d5ede7383485 pour écrire des favoris personnels en HTML

HTML en utilisant img Dessin de balises

FAQ en HTML 1

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!