vue修改数据页面无效的解决方案

当我们在使用Vue进行开发时，经常遇到这样的场景：当我们修改了数据，但是页面上并没有反应。这是由于Vue中的数据响应式机制造成的，需要手动触发重新渲染。那么，针对这种情况，我们该如何解决呢？下面介绍几种常见的解决方案。

1. 使用this.$forceUpdate()方法

this.$forceUpdate()方法可以强制Vue实例强制重新渲染，并重新应用到虚拟DOM中，因此可以解决数据修改后页面不更新的问题。

示例代码：

<template>
  <div>
    <div>{{count}}</div>
    <button @click="handleClick">点击增加</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    handleClick() {
      this.count++;
      this.$forceUpdate();
    }
  }
};
</script>

2. 使用Vue.set()方法

Vue.set()方法可以改变数据并且触发重新渲染。这个方法可以处理对象和数组的情况。Vue.set()方法接收三个参数，第一个参数是对象或数组，第二个参数是属性或者索引，第三个参数是属性或者索引的值, 例如：

Vue.set(vm.items, indexOfItem, newValue);
Vue.set(vm.obj, 'propertyName', newValue);

在这个示例中，我们通过Vue.set()方法修改了data中的items数组，以达到重新渲染页面的目的。

示例代码：

<template>
  <div>
    <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    <button @click="addItem">添加一项</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      items: [1, 2, 3]
    };
  },
  methods: {
    addItem() {
      this.$set(this.items, this.items.length, Math.random());
    }
  }
};
</script>

在上面的示例中，当我们点击“添加一项”按钮时，按钮点击事件会调用addItem方法，这个方法通过Vue.set()方法在items数组的末尾添加了一个新值。由于调用了Vue.set()方法，Vue会观察到数组的变化并且重新渲染视图。