系列文章目录

vue数据：对数组进行增删操作后数据实际已经改变，but页面没有被更新

前言

此文章讲述方法主要针对：数组被页面使用,同时通过循环遍历对数据中符合条件的数据进行增加或删除操作后，而页面中数据却没有实时更新的情况~~

方法一：监听数据，在数据改变时进行调用reload函数重新加载数据，就相当于客户端手动点击F5的效果（这里使用引用的公共方法，也可使用window.location.reload()不过大概率会报错）

代码如下（示例）：

export default {
inject: ["reload"],  
watch: {
    menus: {
      handler: (newVal, oldVal) => {
        if (newVal) {
          console.log(newVal, 909090);
            this.reload()
            //或者
            // window.location.reload()
        }
      },
      deep: true,
    },
  },
}

然鹅~~并没有什么卵用,说明这里不是没有刷新的原因

方法二：嵌套循环，使用Vue.$nextTick方法

（Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM）对改变后数据进行更新

代码如下（示例）：

let menu = window.common.menu
for(let i = 0; i < menu.length; i ++){
    for(let j = 0; j < menu[i].items.length; j ++){
       if(menu[i].items[j].title == element.title){
         console.log(element,'000000000');
         if(!element.state){
            this.$nextTick(()=>{
              //减去或禁用
              menu[i].items.splice(j,1);
              j = j -1
            })
           }
          }
         }
        }
 console.log(that.menus, 8888888);
 this.menus = menu 

依然没有用，此处控制台打印出来的menus虽然已经是改变后的，但页面依然不生效，接着来~~

方法三：在修改数据后使用 this.$forceUpdate();进行强制刷新

// 修改数据后执行
 this.$forceUpdate();

没用，继续~~

方法四：使用setTimeout对循环遍历的数据进行延时处理

    this.moduleItems = window.config.moduleItems
    drawerInfo() {
      let that = this;
      setTimeout(() => {
        that.moduleItems.map((item, index) => {
          that.menus.map((item1, index1) => {
            item1.items.map((item2, index2) => {
              if (item2.title === item.title && item.state == false) {
                this.menus[index1].items.splice(index2, 1);
              }
            });
          });

        });
      }, 1000);
      console.log("最终显示的菜单", that.menus);
    },

终于，这个方法后生效了！！打印的数据和页面数据保持一致，修改数据时页面也实时生效了✌✌

总结

提示：这里对文章进行总结：

综上所述，考虑到这种请路况下数据始终没更新的原因可能是：

被循环的数据（ 此处的that.menus）在创建被赋值之后就进入循环中，当修改数据操作之后此时被循环的数据还没有来得及更新到最新的状态又进入下一次循环，循环中的值始终是旧值，所以页面上的数据并没有实时改变未最新值，好啦，又是填坑的一天~~~~