Vue solves the problem of data being updated but pages not being updated

data(){
    retrun{
        arr: [1.2.3.4.5]}; }Copy the code

1. You cannot change the value of an array by index

Such as:

// The page is not updated
this.arr[1] =100;
Copy the code

Solution:$set(item, indexOfItem,value), item.splice(item,indexOfItem,value)

// Method 1:
this.$set(arr,1.100);
// Method 2:
this.arr.splice(1.1.100);
// Method 3:
this.arr.push(18);
Copy the code

2. You cannot change the length of an array directly

Such as:

this.arr.length = 2;
Copy the code

Solution:item.splice(newLength)

this.arr.splice(2);
Copy the code

3. The loop hierarchy is too deeply nested, causing the page not to be updated

Solution:This.$forceUpdate() manually forces the refresh

this.$forceUpdate();
Copy the code

4. The route changes, but the page is not updated

Cause: ** Two pages reference the same component, the page cannot be updated when switching routes **

Solution:1. Use watch to monitor $route changes. 2. Bind the key attribute to <router-view>

// Method 1:
watch: {
  '$route'() {}}// Method 2:
<router-view :key="key"></router-view>
Copy the code