vue中v-for数据状态值变了,但是视图没改变的解决方案

当 Vue 中使用 v-for 指令循环渲染数据时，有些情况下会出现数据状态值变了，但是视图没有更新的情况。这通常是由于 Vue 的响应式数据机制以及 JavaScript 原始类型和引用类型的特性所致。

以下是两个示例：

示例一

当循环渲染一个父子组件的情况下，子组件中的数据状态值变化导致父组件视图没有更新。

解决方法：

1. 将父组件的数据状态复制一份到子组件中，使子组件的数据状态独立于父组件。
2. 使用 this.$forceUpdate() 方法强制更新父组件的视图。

以下是示例代码：

父组件：

<template>
  <div>
    <h2>父组件：</h2>
    <ul>
      <child-component v-for="item in list" :key="item.id" :item="item" />
    </ul>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent,
  },
  data() {
    return {
      list: [
        { id: 1, name: 'foo' },
        { id: 2, name: 'bar' },
        { id: 3, name: 'baz' },
      ],
    };
  },
  methods: {
    // 模拟更新子组件数据状态的方法
    updateState() {
      this.list[0].name = 'hello';
    },
  },
};
</script>

子组件：

<template>
  <li>
    {{ item.name }}
    <button @click="updateState">修改数据状态</button>
  </li>
</template>

<script>
export default {
  props: ['item'],
  methods: {
    updateState() {
      // 修改子组件中的数据状态
      this.item.name = 'world';
      // 强制更新父组件视图
      this.$parent.$forceUpdate();
    },
  },
};
</script>

示例二

在 v-for 循环渲染数组类型的数据时，更改数组元素的下标（即数组中某个元素的位置）会导致视图不更新。

解决方法：

1. 使用 Vue.set() 或 this.$set() 方法来设置变更的数据，这样 Vue 就能检测到数据变更并更新视图。
2. 使用 splice() 方法删除数组元素并插入新元素。

以下是示例代码：

<template>
  <div>
    <h2>使用 Vue.set()：</h2>
    <ul>
      <li v-for="(item, index) in list" :key="item.id">
        {{ item.name }}
        <button @click="updateStateWithVueSet(index)">修改数据状态</button>
      </li>
    </ul>

    <h2>使用 splice()：</h2>
    <ul>
      <li v-for="(item, index) in list2" :key="item.id">
        {{ item.name }}
        <button @click="updateStateWithSplice(index)">修改数据状态</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'foo' },
        { id: 2, name: 'bar' },
        { id: 3, name: 'baz' },
      ],
      list2: [
        { id: 1, name: 'foo' },
        { id: 2, name: 'bar' },
        { id: 3, name: 'baz' },
      ],
    };
  },
  methods: {
    // 示例二 - 使用 Vue.set()
    updateStateWithVueSet(index) {
      // 使用 Vue.set() 设置变更的数据
      this.$set(this.list, index, { id: index, name: 'hello' });
    },
    // 示例二 - 使用 splice()
    updateStateWithSplice(index) {
      // 删除数组元素并插入新元素
      this.list2.splice(index, 1, { id: index, name: 'world' });
    },
  },
};
</script>