Detailed explanation of Vue list rendering

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:

When you use

index to directly set an item, for example:

vm.items[indexOfItem] = newValue

When you modify The length of the array, for example:

vm.items.length = newLength

In order to solve the first type of problem, the following two methods can achieve the same effect as vm.items[indexOfItem] = newValue, and will also trigger the

stateUpdate:

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

In order to solve the second type of problem, you can use splice:

example1.items.splice(newLength)

I believe you have mastered the method after reading the case in this article, more exciting Please pay attention to other related articles on php Chinese website!

Related reading:

How to use the tag to write personal favorites in HTML

##HTML using img Tag drawing

Frequently asked questions in HTML 1

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!