vue2的修改数据页面不刷新this.$nextTick() || this.$set() || this.$froce

1.这是一种简单粗暴的解决方案吧，那就是在数据更新完成之后对页面进行重排和重绘操纵，但是这种方式对页面的消耗会急剧上升，具体实现方法如下:

【不到万不得已还是不要使用的好】

// data内部定义变量
data() {
    return {
        flag: true,
    }
}
mounted() {
    this.flagFn()  
},
methods: {
    flagFn() {
        setTimeout(() => {
          this.flag = false;
        }, 0);
    }
}

2.在数据都处理完成之后,使用this.$froceUpdate()进行强制刷新【不建议使用】

3.this.$nextTick 将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。

data() {
    return {
      masage: '测试',
  }
},
mounted() {
    this.masageFn();
},
methods: {
    masageFn() {
        this.$nextTick(() => {
          // 需要修改的数据
          this.masage = '修改';
        })
    }
}

3.this.$set()

当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set()这个方法了，简单来说this.$set的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.nameObject.name = 'hi').

调用方法：this.$set( target, key, value )
target：要更改的数据源(可以是对象或者数组)
key：要更改的具体数据
value ：重新赋的值

data() {
    return {
      listDam: [
          {
              name:'山西',
              ageNumber:178,
              text:'这是一个山很多的省'
          },{
              name:'杭州',
              ageNumber:188,
              text:'这是一个环境很美的市'
          }
      ],
      comObj: {
          com: '我的我的',
      },
  }
},
mounted() {
    this.listDamFn();
    this.comObjFn('你的你的')
},
methods: {
    listDamFn() {
        this.$set(this.listDam, 1, {name: '上海', ageNumber: 120, text: '繁忙中'});
    },
    comObjFn(val) {
        this.$set(this.comObj, 'com', val);
    },
}

5.针对数组数据,常见修改数据之后页面不刷新的原因有:

通过数组下标修改数组元素
修改数组长度

那么在修改数组数据的时候,我们应该使push(),pop(),shift(),unshift(),splice(),sort()，reverse()等原生的方法去操作数据,因为vue可以直接检测这些方法所带来的数组数据变化

6.数据不刷新最根本的原因还是因为vue认为模板结构没有更新，所以不会生成新的虚拟的dom，所以我们可以为需要更新的dom添加一个会由操作结束而发生变化的key值，这样就会刷新了

【有修改请留言】