详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

发布时间：2024/02/29

让我来为你详细讲解“详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结”。

1. 确认数据更新

首先，如果你发现Vue数据更新了但页面没有更新，应该先确保数据确实发生了改变。可以使用一些 Vue.js 开发者工具（比如 vue-devtools）来检查组件的数据是否确实发生了变化。

2. 检查 Vue 模板语法

在 Vue 模板语法中，有些写法会引发页面不更新的问题。例如，在使用 v-if 或 v-for 指令时，如果没有正确使用Vue的取值方式，也可以导致页面不刷新。这里我们以 v-for 指令为例说明：

<div v-for="item in items">{{ item }}</div>

这段代码虽然可以正确地循环渲染数组，但是如果将 items 情况，即清空数组，则该 div 中的内容不会立刻消失，因为 Vue.js 并没有检测到 items 数组的变化，也就没有触发页面的重新渲染。如果需要立刻清空该 div 的内容，可以尝试在 items 赋值后，手动触发组件更新：

this.$forceUpdate();

这个方法可以强制 Vue.js 执行一次组件更新。

3. 检查 computed 和 watch

Vue.js 计算属性 (computed) 和侦听器 (watch) 是两个非常强大的特性。但是，如果使用不当，也会导致页面更新问题。最常见的问题之一是，在 computed 属性中使用其他计算属性 (computed) 会导致页面不刷新。因为 computed 计算属性的缓存机制，导致页面不再接受响应式更新。

4. 检查父子组件通信

当父子组件之间需要传递数据时，如果不使用正确的方式，也容易导致页面不更新的问题。常见的错误包括：

父组件没有正确使用 props 将数据传递给子组件；
子组件修改了父组件传递的数据，但是在修改之后没有将数据传递回父组件

5. 检查 this.$nextTick()

Vue.js 在渲染数据之后，会异步执行 DOM 更新。如果您依赖于 DOM 更新后的渲染结果，可能无法得到正确的结果，因为 DOM 更新不是立即执行的。这时候可以使用 this.$nextTick() 方法，该方法是在 DOM 更新后执行回调函数。

6. 检查 keep-alive 缓存

使用 keep-alive 缓存组件时，可能会出现页面不更新的问题。在缓存了一个组件后，切换到其他页面再回到缓存的页面，可能不会触发更新。这是因为 keep-alive 组件缓存了组件实例，组件的数据并没有重新初始化。解决方法是，将需要动态展示数据的组件移出 keep-alive 包裹，这样组件的数据会在每次进入页面时重新初始化。

7. 检查 v-model 双向绑定

在绑定表单元素时，Vue.js 提供了 v-model 双向绑定指令，让开发者更方便地处理表单输入。但是，如果 v-model 绑定的数据，没有正确地初始化或赋值，可能就会导致表单元素无法正确更新。在使用 v-model 绑定表单元素时，应该始终确保绑定数据的初始化和赋值都是正确的。

以上就是详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结的攻略。接下来我将用两条示例来说明。

示例一：父子组件间通信

假设我们有一个父组件和一个子组件，父组件通过 props 将一个对象传递给子组件，代码如下：

<template>
  <div>
    <Child :data="obj"/>
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      obj: {
        name: 'Lucy',
        age: 18,
      },
    };
  },
};
</script>

子组件的模板如下：

<template>
  <div>
    <p>{{data.name}}</p>
    <p>{{data.age}}</p>
    <button @click="changeName">修改名字</button>
  </div>
</template>

<script>
export default {
  props: {
    data: Object,
  },
  methods: {
    changeName() {
      this.data.name = 'Lily';
    },
  },
};
</script>

当我们点击按钮去修改名字时，我们发现页面并没有刷新，名字也没有改变，这是因为我们在子组件中修改了父组件传来的数据，但没有正确地将修改后的数据传递回去。解决方法是，应该在父组件中添加一个修改数据的方法，然后在子组件的 changeName 方法中调用该方法。修改后的代码如下：

<template>
  <div>
    <Child :data="obj" @change-name="changeName" />
  </div>
</template>

<script>
import Child from './Child.vue'

export default {
  components: {
    Child
  },
  data() {
    return {
      obj: {
        name: 'Lucy',
        age: 18,
      },
    };
  },
  methods: {
    changeName(name) {
      this.obj.name = name;
    },
  },
};
</script>

子组件的模板修改为：

<template>
  <div>
    <p>{{data.name}}</p>
    <p>{{data.age}}</p>
    <button @click="changeName">修改名字</button>
  </div>
</template>

<script>
export default {
  props: {
    data: Object,
  },
  methods: {
    changeName() {
      this.$emit('change-name', 'Lily');
    },
  },
};
</script>

示例二：computed 和 watch

假设我们有一个计算属性，根据某个值动态计算出数值，代码如下：

<template>
  <div>
    {{result}}
    <button @click="updateVal">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      val: 0,
    };
  },
  computed: {
    result() {
      return this.val * 2;
    },
  },
  methods: {
    updateVal() {
      this.val = Math.floor(Math.random() * 100);
    },
  },
};
</script>

当我们点击更新按钮时，我们发现页面并没有刷新，结果也没有改变。这是因为我们在计算属性中依赖了一个响应式数据，并且直接修改了这个数据的值。解决方法是，可以使用 watch 监听响应式数据的变化，然后重新计算 computed 属性的值。修改后的代码如下：

<template>
  <div>
    {{result}}
    <button @click="updateVal">更新</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      val: 0,
    };
  },
  computed: {
    result() {
      return this.val * 2;
    },
  },
  methods: {
    updateVal() {
      this.val = Math.floor(Math.random() * 100);
    },
  },
  watch: {
    val() {
      this.$nextTick(() => {
        this.$forceUpdate();
      });
    },
  },
};
</script>

在 watch 中监听 val 的变化后，我们使用 $nextTick 方法执行 DOM 更新后的回调函数，并强制执行一次组件更新。这样就可以解决计算属性不更新的问题了。

希望上述攻略和示例对你有所帮助。