$forceUpdate,vue中data数据修改页面没有同步更新

官方解释:  强制该组件重新渲染。

前几天遇到一个明明把数据更改了但页面显示却不同步的事,检查并打印了好几遍之后我头疼了,然后同事让用这个试一下,真的是长知识了,就记录一下下

在vue框架中，如果data中有一个变量:age，修改他，页面会自动更新。
但如果data中的变量为数组或对象，我们直接去给某个对象或数组添加属性，页面是识别不到的

<template>
  <p>{{userInfo.name}}</p>
  <button @click="updateName">修改userInfo</button>
</template>

<script>
  data(){
    return{
      userInfo:{name:'小明'}
    }
  },
  methods:{
    updateName(){
      this.userInfo.name='小红'
    }
  }
</script>

那么一般这时候我们可能会用this.$set给他进行修改,但我这里用了也没起作用,最后就是直接用this.$forceUpdate()就刷新了

methods:{
  updateName(){
    this.userInfo.name='小红'//在此时，确实已经将userInfo对象修改完成
    console.log(this.userInfo.name);//输出结果: 小红
    this.$forceUpdate();//在这里，强制刷新之后，页面的结果变为'小红'
  }
}