【经验分享】VUE中对象属性发生变化以后，页面没有更新，使用强制

概要

本文是自己编写项目的时候，遇到更新对象以后，Vue页面不变化的情况。在找了一堆资料并且各种频繁测试后，才发现要使用forceUpdate的情况。

这个情况虽然很小，但是如果没有遇到类似问题，切实会耽误很多时间，故而分享给大家，希望对大家能有帮助。

分享的知识点包括：

1. 对从数据库取得的数组，增加新的属性
2. 通过新的页面实现选中和不选中的效果（在v-for的具体事例）

场景

在弹出的图片选择层，选择图片后，并进行高亮提示，如图：

设计思路

1. 使用ajax取得图像数组
2. 为每个数组设置属性choose
3. 使用v-for循环图片
4. 设置点击事件，如果点击，设计值choose = 1，选中；页面更新

具体代码

1. 使用ajax取得图像数组，事例中的数组为“this.materials”
2. 为每个数组设置属性choose，需要for循环，增加属性choose

   this.$axios(`/api/material/list`)
        .then(res => {
          this.materials = res.data;

          // 为每个对象设置choose属性
          for (let n1 = 0; n1 < this.materials.length; n1++) {
            if (typeof this.materials[n1].choose === "undefined") {
              this.materials[n1].choose = 0; 
            }
          }

          console.log(res.data);
        })
        .catch(err => {
          console.log(err);
        });

3. 使用v-for循环图片
   此代码中的样式等，已经去掉，避免干扰，只留下主要代码。
   重要代码为
   :class="[{ 'border-red-500': item.choose }, { 'opacity-75': item.choose }]"

<div v-for="(item, index) in this.materials" :key="index" class="..." @click="chooseGoodswipe(index)">
            <div
              :style="'width:100px;height:100px;background-image: url(' + $oss + '/' + item.url + ')'"
             :class="[{ 'border-red-500': item.choose }, { 'opacity-75': item.choose }]"
            ></div>

            <div>{{ item.name }}</div>
          </div>

4. 设定点击事件，更新choose属性，注意最后用到了“ this.$forceUpdate();”

  chooseGoodswipe(index) {
      if (this.materials[index].choose === 1) {
        // 取消选择
        this.materials[index].choose = 0;
      } else {
        // 选择
        this.materials[index].choose = 1;
      }
      // this.$forceUpdate();
    },

如果没有this.$forceUpdate()页面是没有任何变化的。

原因

因为数据对象的层级较多，导致不会触发render事件，页面也就不会变化。

解决方案

在设计到两级，或者中途修改了属性的，都会导致页面不会自动更新。如果你发现页面乜有更新，那么就强制更新就行了。

备注

在使用数组、对象、以及需要多次赋值的时候，页面的更新是非常头疼的问题，经常会各种问题频发。这种情况，调试的时候一定要有耐心，多去调试，就能更加深刻的理解Vue的render机制。