1. Vue cannot detect directly modifying an array item through an array index
Reason: Due to JavaScript limitations, Vue cannot detect changes in arrays and objects
Solution:
this.$set(arr,index,newVal)
2. The value is assigned when the selection function is selected, but the page is not rendered
Scenario:
Clicking this does not show "√"
Solution:
checkClick (item) { item.check =! item.check; this.$forceUpdate() }, I heard that the level of cyclic data update is too deep, resulting in the data not being updated, resulting in the view not being updated, which can be solved with the above, but I I have never encountered this situation, please check the official Vue.js
3. When the routing parameters change, the page is not updated, essentially the data is not updated
Reason: When the routing view component references the same component, when the routing parameters change, the component cannot be updated.
Solution:
Monitor $route changes through watch
watch: { '$route': function() { } } 4. The operation DOM data will not change before the asynchronous update is executed Reason: Vue executes asynchronously when updating the DOM. As long as data changes are detected, Vue will open a queue and buffer all data changes that occur in the same event loop. If the same watcher is triggered multiple times, it will only be pushed into the queue once. This deduplication while buffering is very important to avoid unnecessary calculations and DOM manipulations. Then, in the next event loop "nextTick", Vue flushes the queue and performs the actual (deduplicated) work.
Solution:
this.$nextTick(function(){ })
5. Get the array returned by the background for sorting, but the page content is not sorted
Reason: The displayed elements will not move
Solution:
Use v-if to hide the elements first, and then display the elements after the updated array is sorted