This time I will bring you a detailed explanation of Vue list rendering, and a detailed explanation of Vue list rendering. What are the precautions? Here is a practical case, let’s take a look.

Mutation method (mutation method), as the name suggests, will change the original array called by these methods. In contrast, there are also non-mutating methods, such as filter(), concat() and slice(). These do not change the original array, but always return a new array. When using the non-mutation method, you can replace the old array with the new array:

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

The above operation will not cause Vue to discard the existing DOM and re-render the entire list. Vue implements some smart heuristics to maximize DOM element reuse, so replacing the original array with an array containing the same elements is a very efficient operation

Note

Because## Due to limitations of #JavaScript, Vue cannot detect the following changed arrays:

index to directly set an item, for example:

vm.items[indexOfItem] = newValue

vm.items.length = newLength

stateUpdate:

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

example1.items.splice(newLength)

How to use the tag to write personal favorites in HTML

The above is the detailed content of Detailed explanation of Vue list rendering. For more information, please follow other related articles on the PHP Chinese website!