47 vue 常见的几种模型视图不同步的问题

前言

这里主要是来看一下关于 vue 中的一些场景下面可能会出现模型和视图不同步更新的情况

然后这种情况主要是 vue 中的对象属性没有响应式的 setter, getter

然后我们这里就来看一下大多数的情况下的一个场景, 和一些处理方式

当然处理方式主要是基于 Vue.set, this.$set 之类, 这里不着重介绍, 也可以使用 this.$forceUpdate 来强行渲染

当然前面出现过一些特殊场景下的模型视图不同步的问题, 之前的问题如下, 我们这里主要是列举一下常见的一些情况

el-dialog 的 appendToBody 属性, 导致 vue 响应式失效

el-tree defaultCheckedKeys配置和树上面选中节点不同步问题

特定的操作之后响应式对象不“响应“了(一)

特定的操作之后响应式对象不“响应“了(二)

直接使用 dom api 更新了 #text节点, 之后响应式更新不生效了

data本身的手动配置的属性

样例代码如下

 <template>
   <div>
     <div v-if="message" >
       <span> {{message}} </span>
     </div>
     <div v-else > else </div>
   </div>
</template>

<script>
export default {
  data() {
    return {
      message: ""
    }
  },
  mounted() {
    let _this = this
    setTimeout(function() {
      _this.message = "this is message"
      // new field by VueComponent
      _this.field01 = "xx"
      console.log(_this.message)
    }, 5000)
  },
  methods: {

  }
}
</script>

当然其实可以直接基于 this.data 的 message属性和 field01属性

直接注册在 data 下面的 message 是一直都是响应式的, 但是通过 this.field01 设置的属性 Vue 这边是感知不到的, 是没有响应式的

从实际的 this 的相关属性来看 this 外层的 message 是有响应式的 getter, setter 的, 然后 field01 没有

this._data 也是只有 message 属性, 没有 field01 属性的

通过 this.field01 属性没有响应式的 setter, getter 就可以判断出 field01 是不会响应式更新的

data下面的对象的手动配置的属性

样例代码如下

 <template>
   <div> this is test </div>
</template>

<script>
export default {
  data() {
    return {
      info : {
        message: "xx",
        field02: "field02",
      }
    }
  },
  mounted() {
    let _this = this
    // case1. new field by update by attribute
    setTimeout(function() {
      _this.info.message = "this is message"
      // new field by VueComponent
      _this.info.field02 = "field02"
      _this.info.field03 = "field03"
      console.log(_this.info)
    }, 5000)

    // case1. update _this.info by new object 
    setTimeout(function() {
      _this.info = {
        message : "this is message2",
        field01 : "field01 updated",
        field02 : "field02 updated",
      }
      console.log(_this.info)
    }, 10000)
  },
  methods: {

  }
}
</script>

然后这里有两个 case, 我们这依次来看一下

第一个是通过 this.info.field03在 this.info 中增加了两个字段, message, field02 是已有的字段

大概的规则是直接通过 this.info.xx 增加的这部分字段是没有响应式的 setter, getter 的, 我们来看一下情况

从下面可以看到确实如此

然后直接设置 this.info 对象, 其所有的属性都是有响应式的 setter, getter 的

这个其中的区别大概是 this.info 是 Object, 而没有添加响应式的 setter, getter 的是基础的数据类型吧

然后从结果来看也是确实如此

数组的手动配置的属性

样例代码如下

 <template>
  <div>
    <div v-for="(item, index) in planConfigs" :key="index" class="detail-box">
      <div class="detail-title">
        <div>
          <el-button type="primary" @click="handleClick(item)">
            收起
          </el-button>
        </div>
      </div>
      <el-collapse-transition>
        <div v-show="item.packUp" >
          <div>内容 {{item.name}} </div>
        </div>
      </el-collapse-transition>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      planConfigs: [
      ]
    }
  },
  mounted() {
    // case1. push an empty object, then update by attribute
    this.planConfigs.push({})
    this.planConfigs[0].name = "name"
    this.planConfigs[0].code = "code"

    // case2. push an attribute setten object
    this.planConfigs.push({
      name: "name2",
      age: "age",
      packUp: true
    })

    // case3. push an object, then reset object by array index
    this.planConfigs.push({
      name: "name2",
      age: "age",
      packUp: true
    })
    this.planConfigs[2] = {
      field01: "field01",
      field02: "field02",
      packUp: true
    }

    // case4. push an object, then reset object by splice
    this.planConfigs.push({
      name: "name2",
      age: "age",
      packUp: true
    })
    this.planConfigs.splice(3, 1, {
      field01: "field01",
      field02: "field02",
      packUp: true
    })

    this.planConfigs.forEach(ele => {
      ele.packUp = true
    })
    console.log(this.planConfigs)
  },
  methods: {
    handleClick(item) {
      item.packUp = !item.packUp
      // this.$forceUpdate()
      console.log(item)
    }
  }
}
</script>

这里有四个 case, 这几个都有大大小小的不同, 也会产生一些不同的差异

第一个是往数组里面添加了一个空对象, 然后外层通过属性配置增加字段

第二个是往数组里面添加对象, 待添加的对象本身就已经设置好了属性

第三个是往数组里面添加了设置好的对象, 然后之后通过索引直接更新的对象

第四个是往数组里面添加了设置好的对象, 然后之后通过 splice更新的对象

我们这里来看一下这里的四种情况, 每一个对象的响应式的 setter, getter 是不一样的