v-for
Function: List rendering, the label structure where it is located is generated cyclically according to the number of data. Whoever the instructions are written, they will be created in a loop
1. Syntax:
v-for = "(value variable, index variable) in target structure": key = index variable
v-for = "Value variable in Target structure: key = index variable"
Target structure: can be array, object, string
2. If the array method is modified, the page will be updated. If it is not modified, it will not be possible, but it can be reassigned to the variable to allow you to update the page.
-The key function in for: When updated:
- There is a key, according to the key comparison, the key is set to index: equal to no settings, reuse on-site
- No key, update on site
-For key
The only unrepeatable string or value, the id in the array
During the use of key, it has id and has index without id.
Benefits
Can improve the performance of the update
v-set
Function: Because vue is a data-driven page, you can use it when modifying the original array.[0]='test'However, due to the bug unique to the official vue2, the original array is modified in this way. Although the array has indeed changed, the page has not been updated directly. If you need to modify the data like this, you need to$setMethod to modify
method:
this.$set(Modify the array，index，‘Modified content')
Repaint and reflow
- Redraw: Changes in color/transparency of elements
- Reflow: The geometric information (width/position) of the element changes
- Reflow is to re-draw the structure and re-paint it to color you
- Reflow will definitely trigger repaint, but repaint will not necessarily cause reflow
Virtual DOM
Meaning: It is essentially a js object that saves DOM key information
Benefits: Improve the performance of DOM updates, infrequently operate the real DOM, find the changed parts in memory, and then update the corresponding properties or content of the real DOM (patch)
computed compute attribute
Syntax: Definition is in computed and data(){} in parallel
case:
computed:{
totalPrice(){//Calculate the attribute name set(val){ //Execute when the computer attribute is modified //val is the value assigned by the calculation attribute }
get(){ //Get executes when the computer attribute is called (accessed) // Must return a result }
return *this*//Return the operation result }
}
Cache: calculate attributes, cache based on the value of dependencies, and the dependency variables remain unchanged, and the results are directly retrieved from the cache (with cache)
Summarize
This is all about this article about v-for in Vue. For more Vue v-for content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!