vue更新数据却不渲染页面的解决

下面是关于Vue更新数据却不渲染页面的解决攻略的详细讲解。

问题背景

在Vue中，一般我们通过修改组件的数据来更新页面。但有时候在修改数据后，页面却没有自动更新，这可能会给我们带来很多困扰。这种情况在Vue中被称作“数据更新但是视图不更新”。

可能出现原因

造成“数据更新但是视图不更新”的原因主要有以下几种：

Vue的异步更新机制：当我们修改Vue中的数据时，Vue并不会立即更新视图，而是将其加入到一个异步队列中，等待下一轮“事件循环”（Event Loop）时更新视图。
数据更新不符合Vue的响应式原理：Vue的响应式原理中，只有在属性被创建时就存在的对象中才能够检测到属性的变化。如果我们尝试以以下方式添加对象的属性，这种变化不会被Vue监测到：

this.$set(this.someObject, 'newProperty', 'value');

对象变化检测问题：Vue检测对象变化是基于修改的setter方法。如果你想在数组中修改某个元素，例如：

this.array[indexOfElement] = newValue;

那么Vue就无法检测到这种变化。因为这种修改方式并没有调用数组的setter方法。我们应该使用Vue提供的方法对数组进行修改，例如：

this.$set(this.array, indexOfElement, newValue);

模板编写错误：在编写模板时可能会出现各种错误，例如：未正确书写表达式、未正确使用指令等。这些都可能导致Vue无法正确解析模板，从而无法正确更新视图。

解决方案

对于以上可能出现的原因，我们可以从以下几个角度解决“数据更新但是视图不更新”的问题。

1. 将数据访问器中的数据转为响应式

当我们的数据不能被Vue所监测到时，我们应该清楚这些数据不会被Vue的响应式系统所检测到，因此Vue也就不会自动触发视图的更新。为了这种数据可以被Vue所监测到，我们可以将这些数据的属性转为响应式数据。Vue提供了响应式方法Vue.observable()，它可以将普通的对象转为响应式对象。例如：

import { observable } from 'vue';

export default {
  data() {
    return {
      someObject: observable({
        name: 'Jack',
        age: 20
      })
    };
  }
};

在这个例子中，我们使用Vue提供的observable()方法将someObject中的属性转为响应式属性。现在即使我们以以下方式修改someObject中的属性，Vue也能够正确的检测到：

this.someObject.name = 'Tom';
this.someObject.age = 25;

2. 使用Vue提供的API修改数据

在Vue中修改元素的值推荐使用Vue提供的API进行修改，这种方式能够保证Vue能够正确的监测到数据的更新。例如，对于像数组这样的数据结构，我们可以使用Vue提供的方法对数组进行修改：

this.$set(this.array, indexOfElement, newValue);

使用这种方式修改数组元素的值将会触发Vue的视图更新。

再比如，如果我们想要在对象中添加一个新属性并更新视图，我们可以使用Vue提供的this.$set()方法，例如：

this.$set(this.someObject, 'newProperty', 'value');

这种方式在修改对象属性时，也能够确保Vue能够监测到数据的更新。

3. 将修改数据的操作放置到Vue的事件循环中

Vue的异步更新机制意味着，当我们修改Vue组件中的数据时，Vue不能立即更新视图。如果我们的视图没有在下一轮事件循环中更新，那么我们可以手动调用Vue提供的$nextTick()方法。这个方法会在Vue.js下一次 DOM 更新循环结束之后执行延迟回调。

例如，在修改数据后手动调用$nextTick()函数：

this.someObject.name = 'Tom';

this.$nextTick(() => {
  // 在这里更新dom
});

通过手动调用Vue提供的this.$nextTick()方法，我们可以确保Vue在下一轮事件循环中正确的更新视图。

示例

我们通过下面的示例来更详细的了解如何解决“数据更新但是视图不更新”的问题。

示例1：数组更新但是视图没有更新

在这个例子中我们有一个数组list，其中包含一些对象。我们尝试在数组中修改某个元素的属性值，但是同时我们发现视图并没有自动更新。

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      <p>{{ item.name }}</p>
    </div>
    <button @click="updateItem">更新数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: 'Jack',
          age: 20
        },
        {
          name: 'Tom',
          age: 30
        }
      ]
    };
  },
  methods: {
    updateItem() {
      this.list[0].name = 'Lucy';
      // 注意这里是没有触发视图更新的
    }
  }
};
</script>

在这个例子中，当我们修改数组中的元素时，Vue并没有能够检测到这种变化，进而也就不会对视图进行更新。对于这个问题我们可以使用Vue提供的$set()方法来解决，例如这样：

updateItem() {
  this.$set(this.list, 0, { name: 'Lucy', age: 20 });
  // 这里使用了Vue提供的$set方法更新数组元素
}

在这个例子中，我们使用Vue提供的$set方法来更新数组元素的值，这种更新方式能够确保Vue能够监测到数据的修改并更新视图。

示例2：延迟更新数据的视图

在这个示例中，我们可以看到，在一场点击事件后，我们的数据已经被更新了，但是我们的DOM并没有自动更新。原因是Vue的异步更新机制：当我们修改Vue中的数据时，Vue并不会立即更新视图，而是将其加入到一个异步队列中，等待下一轮“事件循环”（Event Loop）时更新视图。如果我们在事件处理程序中设置一个时间延迟来更新DOM，那么在下一次Event Loop中，Vue将可以检测到数据更新并更新DOM。

<template>
  <div>
    <div>{{ message }}</div>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Vue.js'
    };
  },
  methods: {
    updateData() {
      setTimeout(() => {
        this.message = 'Vue.js 3.0';
      }, 0);
    },
  },
};
</script>

在这个实例中，当我们单击按钮时，我们会设置一个0毫秒的超时。在超时时间之后，我们更新了内部数据。然后，Vue会在下一次Event Loop中检测到这次数据更新，并更新DOM。