I encountered a pitfall when I was doing the checkbox multi-select function. The logic was correct no matter how I looked at it, but there was a bug. Finally, I found that the value in the array changed and the page checked and not re-rendered.
I changed the keyword search and found the relevant method.
Actually, I saw this when I read the documentation tutorial before, but I will only feel the most direct feeling after I really use it.
Array update detection
Variation method
Vue contains a set of mutated methods to observe arrays, so they will also trigger view updates. These methods are as follows:
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
You open the console and call the mutation method using the items array in the previous example: ({ message: 'Baz' }) .
Replace array
Mutation method, as the name suggests, changes the original array called by these methods. In contrast, there are non-mutating method methods, such as filter(), concat() and slice() . These do not change the original array, but always return a new array. When using non-mutated methods, you can replace the old array with the new array:
= (function (item) {
return (/Foo/)
})
You might think this will cause Vue to discard the existing DOM and rerender the entire list. Fortunately, this is not the case. Vue implements some intelligent and heuristic methods in order to enable the maximum range of DOM elements to be reused, so it is very efficient to replace the original array with an array containing the same elements.
Things to note
Due to JavaScript limitations, Vue cannot detect arrays with the following changes:
When you use the index to set an item directly, for example: [indexOfItem] = newValue
When you modify the length of the array, for example: = newLength
To solve the first type of problem, both of the following methods can achieve the same effect as [indexOfItem] = newValue, and will also trigger status updates:
// (, indexOfItem, newValue) // (indexOfItem, 1, newValue)
To solve the second type of problem, you can use splice:
(newLength)
Precautions for object change detection
Or due to JavaScript limitations, Vue cannot detect the addition or removal of object properties:
var vm = new Vue({
data: {
a: 1
}
})
// `` It's responsive now
= 2
// `` Not responsive
For instances that have been created, Vue cannot dynamically add responsive properties at the root level. However, you can use the (object, key, value) method to add responsive properties to a nested object. For example, for:
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
You can add a new age property to the nested userProfile object:
(, 'age', 27)
You can also use the vm.$set instance method, which is just a global alias:
this.$set(, 'age', 27)
Sometimes you may need to assign multiple new properties to an existing object, such as using () or _.extend(). In this case, you should create a new object with the properties of the two objects. So, if you want to add new responsive properties, don't look like this:
(, {
age: 27,
favoriteColor: 'Vue Green'
})
You should do this:
= ({}, , {
age: 27,
favoriteColor: 'Vue Green'
})
The above article solves the problem of not rendering the object attribute change page in the vue array. This is all the content I share with you. I hope you can give you a reference and I hope you can support me more.