使用 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
2
3
4
5
<template>
  <div>
   <child v-if='state'></child>
  </div>
</template>

使用内置 $forceUpdate方法 强制组件刷新

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

组件绑定 :key=“value” 动态设置 key 的 value

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