vue 解决数据更新但页面不更新的问题

data(){
    retrun{
        arr:[1,2,3,4,5]
    };
}

1、不能通过索引直接修改数组的值

例如：

//页面不更新
this.arr[1]=100;

解决：this.$set(item, indexOfItem, value)、 item.splice(item,indexOfItem,value)

//方式一：
this.$set(arr,1,100);
//方式二：
this.arr.splice(1, 1, 100);
//方式三：
this.arr.push(18);

2、不能直接修改数组的长度

例如：

this.arr.length = 2;

解决：item.splice(newLength)

this.arr.splice(2);

3、循环层级嵌套太深，导致页面不更新

解决：this.$forceUpdate() 手动强制刷新

this.$forceUpdate();

4、路由变化，但页面不更新

原因：**两个页面引用了相同的组件，切换路由时页面无法更新**

解决：1、通过 watch 监听 $route 的变化。 2、给 <router-view> 绑定 key 属性

//方式一：
watch: {
  '$route'() {
     
  }
}
//方式二：
<router-view :key="key"></router-view>