What is the rendering of Vue list

In view of what Vue list rendering is like, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

Mutation methods (mutationmethod), as the name implies, change the original array that is called by these methods. In contrast, there are non-variant (non-mutatingmethod) methods, such as filter (), concat (), and slice (). These do not change the original array, but always return a new array. When using a non-variant method, you can replace the old array with a new array:

Example1.items=example1.items.filter (function (item) {returnitem.message.match (/ Foo/)}) concat slice filter {{item.list}} varexample=newVue ({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)})})

This does not cause Vue to discard the existing DOM and re-render the entire list. Vue implements some intelligent heuristics to maximize the reuse of DOM elements, so replacing the original array with an array with the same elements is very efficient.

Points for attention

Due to the limitation of JavaScript, Vue cannot detect the array of the following changes:

When you use the index to set an item directly, for example:

Vm.items [indexOfItem] = newValue

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

Vm.items.length=newLength

To solve the first type of problem, the following two ways can achieve the same effect as vm.items [indexOfItem] = newValue, and also trigger a status update:

/ / Vue.set

Vue.set (example1.items,indexOfItem,newValue)

/ / Array.prototype.splice

Example1.items.splice (indexOfItem,1,newValue)

To solve the second type of problem, you can use splice:

Example1.items.splice (newLength)

The advantages of Vue Vue specific lightweight framework, easy to learn, two-way data binding, componentization, separation of data and structure, virtual DOM, fast running and other advantages, Vue pages use local refresh, do not have to request all the data and dom every time the page is redirected, which can greatly improve the access speed and user experience.

The answer to the question about Vue list rendering is shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.