关于vue2中数据数据更新视图不更新的情况

1.问题情景

vue2的数据劫持是基于Object.defineProperty()的，es6中引入了Proxy对象，vue3也正是使用的Proxy对象所以不会发生下面将要描述的vue2数据更新视图不能及时更新的问题。vue2中多层数据嵌套导致vue无法对成员进行监听，通俗一点讲就是你在使用vue2的时候定义了对象并且写出了如下代码：

<template>
  <div>{{`${baseInfo.contacts}` }}</div>
  <button @click="changeBaseInfo("新的联系方式")"></button>
</template>
<script>
  data(){
    return {
      baseInfo:{
        contacts:"联系方式"  
      }
    }
  },
  methods:{
    changeBaseInfo(val){
      this.baseInfo.contacts:val
    }
  }
</script>

这段代码看似天衣无缝其实当你点击按钮时候changeBaseInfo方法确实也是被执行了但是你的div里面的内容还是没有变化也就是说这种操作暗地里操作一下数据还是可以但是如果数据是要实时显示到视图上的那就可真遭罪了，下面写一下逆天改命的方法

2.解决问题

使用$set方法

原：
 this.baseInfo.contacts:val
改：
 this.$set(this.baseInfo,"contacts",val)

ok,秒了

手动触发更新

这招很快但是有副作用慎用

直接在原来的代码this.baseInfo.contacts:val后面加上一句

this.$forceUpdate()//强制使Vue实例重新渲染，这就是霸道的力量