Mental formula:
- Array change method will cause v-for to be updated and page update
- Array non-change method: Returning a new array will not cause v-for updates, and the update value cannot be detected and overridden or this.$set() can be used.
The array change method is as follows:
1. () Add elements from the back
(5)
2. () Remove the element from the back, only one
()
3. () Delete an element from the front, only one can be deleted
()
4. () Add elements from the front, and the array length after the return value is added
(8)
5. (i,n) Delete the number of N (number of deleted) that has been deleted from i (index value)
let arr = [1,2,3,4,5] ((2,2)) //[3,4] (arr) // [1,2,5]
6. () Sort the array and return the array with the value
let arr = [2,10,6,1,4,22,3] (()) // [1, 10, 2, 22, 3, 4, 6] let arr1 = ((a, b) =>a - b) (arr1) // [1, 2, 3, 4, 6, 10, 22] let arr2 = ((a, b) =>b-a) (arr2) // [22, 10, 6, 4, 3, 2, 1]
7. () Invert the array
let arr = [1,2,3,4,5] (()) // [5,4,3,2,1] (arr) // [5,4,3,2,1]
The non-change method of array is as follows:
1. ()Connect two arrays
let arr = [1,2,3,4,5] (([1,2])) // [1,2,3,4,5,1,2] (arr) // [1,2,3,4,5]
2. (start,end) Cut the index start to the end index value, and does not include the start index value
let arr = [1,2,3,4,5] ((1,3)) // [2,3]
Coverage method
<li v-for="(val, index) in arr" :key="index">
{{ val }}
</li>
<button @click="sliceBtn">Before intercept3indivual</button>
sliceBtn(){
// 2. The array slice method will not cause v-for update // slice will not change the original array // (0, 3)
// Solve v-for updates - Overwrite original array let newArr = (0, 3)
= newArr
},
This.$set() method
<li v-for="(val, index) in arr" :key="index">
{{ val }}
</li>
<button @click="sliceBtn">Update subscript0Value of</button>
sliceBtn(){
// When updating a certain value, v-for cannot detect it // [0] = 1000
// Solved - this.$set() // Parameter 1: Update the target structure // Parameter 2: Update location // Parameter 3: Update value let newArr = (0, 3)
= newArr
},
This is the article about v-for update detection in Vue. For more related vue v-for update detection content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!