我针对这部分内容重新编写一篇博文，做了更加细致的讲解，推荐查看：Vue 三种强制刷新方法的机制、使用场景、开销说明
本片文章不久将被删除！

前言

在vue 开发中，出于各种目的，我们常常需要让组件重新加载渲染。接下来，我们就讲讲强制组件刷新的方法。

方法一：v-if

对于v-if 的使用，我们常用在子组件显示上。我们查看文档时，会发现它常常被用于与v-show 的比较。对于经常性加载的组件，显示方式应该使用v-show 来实现组件的显示。为什么呢？因为当 v-if = ‘false’ 时，子组件是会被卸载的。当它重新 v-if = ‘true’ 时，它需要重新跑一遍生命周期的进程。而 v-show 仅是让子组件隐藏了而已。所以，使用v-show 并不用重新跑一遍生命周期。这样对系统资源的花销就比较小了。故而，对于经常性加载的组件建议使用 v-show 来实现显示/隐藏，节省系统花销。
基于上面理论，我们知道了v-if 会让组件重新渲染。这不就是组件刷新吗？所以，我们就可以借组v-if 实现组件的强制刷新。

实现原理：通过v-if 来控制组件的显示/隐藏。

1、我们可以在父组件设置一个变量用于存放子组件显示/隐藏的状态(state)。

<template>
  <div>
   <child v-if='state'></child>
  </div>
</template>

<script>
import child from './child'
export default {
  name: "parent",
  data() {
    return {
      state: false
    };
  },
  components:{
    child:child
  }
};
</script>

2、然后我们通过设置方法来控制显示和隐藏。

 methods: {
    isShow: function() {
      this.state = true;
    },
    isHidde: function() {
      this.state = false;
    }

当触发 isShow 方法时，组件就加载渲染。当触发 isHidden 方法时，组件就卸载隐藏。当下次再触发 isShow 方法时，组件就重新渲染加载了。这样就实现了组件的刷新。

如果想在子组件某个操作完成后就卸载该组件，那么可以在子组件中调用isHidden 实现。比如说子组件是confirm 框， 当用户点击“确定/取消”后想卸载该组件，那就在确定/取消事件里调用添加代码：

this.$parent.isHidde();

方法二：this.$forceUpdate()

上面是子组件的强制刷新方法。但有时候我们想直接对当前组件进行强制刷新操作，那该怎么办呢？我们可以调用this.$forceUpdate()可以强制当前组件刷新。

方法三：:key=“value”

该方法和方法一非常相似，都是通过改变一个变量来实现组件的强制刷新。但要注意的是，只要当key的值改变，组件就会自动刷新，所以key的值可以是任何类型。而v-if 的值严格来说只能是true/false。