有时候，依赖 Vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让Vue以正确的方式重新呈现组件呢？
强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。当我们需要重新渲染组件时，只需更 key 的值，Vue 就会重新渲染组件。
这是一个非常简单的解决方案。
当然，你可能会对其他方式会更感兴趣：
- 简单粗暴的方式：重新加载整个页面
- 不妥的方式：使用 v-if
- 较好的方法：使用Vue的内置forceUpdate方法
- 最好的方法：在组件上进行 key 更改
简单粗暴的方式：重新加载整个页面
这相当于每次你想关闭应用程序时都要重新启动你的电脑。
这种方式或许有用，但这是一个非常糟糕的解决方案，不要这样做，我们来看看更好的方法。
更改 key 以强制重新渲染组件
我们可以采用这种将key分配给子组件的策略，但是每次想重新渲染组件时，只需更新该key即可。
这是一个非常基本的方法
<template>
<component-to-re-render :key="componentKey" />
</template>
export default {
data() {
return {
componentKey: 0, //初始化key值为0
};
},
methods: {
forceRerender() {
this.componentKey += 1; //想让组件重新渲染的时候给key值加1变化
}
}
}
每次forceRerender调用时，我们的道具componentKey都会改变。当这种情况发生时，Vue 会知道它必须销毁组件并创建一个新组件。
你得到的是一个子组件，它将重新初始化自己并“重置”它的状态。
一个简单而优雅的方法来解决我们的问题！
