vue中$forceUpdate的使用

$forceUpdate的用处

• 在Vue官方文档中指出，$forceUpdate具有强制刷新的作用。

使用场景

• 对于普通类型的数据来说，我们不需要操心数据绑定，Vue的内部机制已经帮助我们监听更新，但是对于一个复杂对象来说，例如数组对象、对象数组等，我们对其某个元素增加属性，vue就监听不到了。对照着vue文档规范，我们应该使用 $set来进行数据的操作或者初始化，这样的话vue内部是能够监听到的。
• 如果不想用 $set 来进行操作，我们就需要使用 $forceUpdate来进行强制刷新，因为你修改了数据，dom层改变，但视图层并没有改变，说明数据本身是修改的，但是vue并没有监听到，使用 $forceUpdate就相当于按照最新数据给重新渲染了一下，强制视图更新。

举个例子

• 那在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>

• 在updateName函数中，我们尝试给userInfo对象修改值，发现页面其实并没有变化

• 那这时候有两种解决方法：

方法一：

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

方法二：

methods:{
  updateName(){
    this.$set('userInfo',name,'小红');
  }
}