通过Tab切换效果的例子解决vue中数组更新后视图不刷新问题

冷不防 2023-02-27 12:07 7阅读 0赞

### 故事背景 ###

> 开发中我们比如做Tab页切换效果，思路是首先声明一个数组Arr，每个Tab标签对应一个数组下标存着Tab选中的状态，arr\[true, false, false, false, false\]，然后去根据Tab选中的下标去更改数组Arr的值为true，但是问题出现了，为什么我触发了更新数组方法而视图没有改变呢(PS:VUE中)。以下代码做了错误还原以及解决方法Object.assign(\{\}, this.XXX, arr)或者用数组的push方法也可以解决这个问题，为什么会发生这个呢，没仔细研究，感觉是内存地址没有发生变动或者是数组的set方法没有被触发，总之解决了，欢迎讨论。

> 以下伪代码仅供参考使用

data () {
 
 return {
 
 tabStatus: [true, false, false, false, false]
 }
 },
 methods: {
 
 setTabStatus(index) {
 
 let arr = [];
 for(let i = 0; i < 4; i++) {
 
 if(index === i) {
 
 arr.push(true);
 }else {
 
 arr.push(false);
 }
 }
 // 这里是原先错误的方式
 // this.tabStatus = arr;
 // 这个是正确的方式
 this.tabStatus = Object.assign([], this.tabStatus, arr)
 }
 }

> 模板代码

> css代码用的是scss

.row{
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      flex-wrap: wrap;
    }
    .tab-time-st{
      position: absolute;
      top: 380px;
      width: 100%;
      height:34px;
      line-height: 34px;
      font-size:12px;
      font-weight:400;
      background: #F9FAFA;
      color:rgba(153,153,153,1);
      text-align: center;
      span{
        flex: 2;
        height: 34px;
        border: 1px solid #E6E8EA;
      }
      span:nth-child(1), span:nth-child(2), span:nth-child(3), span:nth-child(4){
        border-right: 0px;
      }
      .in{
        border: 0px 0px 0px;
        color: #333;
        height:32px;
        line-height: 32px;
      }
    }

> 效果图  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MDQwMTU1_size_16_color_FFFFFF_t_70_pic_center]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI1MDQwMTU1_size_16_color_FFFFFF_t_70_pic_center]: /images/20230209/4d70804dc1a24f0d91d4cc8730512282.png