Vue 数据与页面更新不同步

Vue文档原文：

因此，以下getAllImgList方法中给data中的对象进行直接赋值的操作就会导致数据与页面不同步：

<van-grid-item v-for="(item, index) in img" :key="index" @click="click(item)" >
  <van-image :src="item.img" />
  <div class="mask" v-if="item.checked" >
    <img class="quan" src="~assets/img/photo/xuanzetupian/quan.png" alt="">
    <img class="gou" src="~assets/img/photo/xuanzetupian/gou.png" alt="">
  </div>
</van-grid-item>

data () {
  return {
    img: [
      {img: require('assets/img/photo/xuanzetupian/1.png')},
      {img: require('assets/img/photo/xuanzetupian/2.png')},
      {img: require('assets/img/photo/xuanzetupian/3.png')},
      ....
    ],
    ....
  };
},
computed: {
  getAllImgList() {
    for (let i of this.img) {
      i.checked = false // 直接赋值，这样新添加的属性是非响应式的，会导致数据与页面不同步
    }
  }
},
methods: {
  click(item) {
    item.checked = !item.checked
  },
},

以下为正确的做法：

方式一：虽然通过赋值添加的属性是非响应式的，但可以使用 this.$forceUpdate() 使页面根据当前最新的数据强制渲染，使页面与数据保持一致。

methods: {
  click(item) {
    item.checked = !item.checked
    this.$forceUpdate()
  },
},

方式二：使用 Vue.set( target, propertyName/index, value ) 进行添加新属性即可，这样可以使新添加的属性是响应式的。

computed: {
  getAllImgList() {
    for (let i of this.img) {
      this.$set(i, 'checked', false)
    }
  }
},