如何通过Vue实现组件的强制重新渲染？

本文共计2052个文字，预计阅读时间需要9分钟。

有时，依赖Vue的响应式方式更新数据是不够的，反向操作。我们可能需要手动重新渲染组件来更新数据。或者，我们可能只想抛开盘前DOM，重新开始。那么，如何让Vue以正确的方式重新渲染组件呢？

有时候，依赖 Vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让Vue以正确的方式重新呈现组件呢？

强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。 当我们需要重新渲染组件时，只需更 key 的值，Vue 就会重新渲染组件。

这是一个非常简单的解决方案。

当然，你可能会对其他方式会更感兴趣：

简单粗暴的方式：重新加载整个页面
不妥的方式：使用 v-if
较好的方法：使用Vue的内置forceUpdate方法
最好的方法：在组件上进行 key 更改

简单粗暴的方式：重新加载整个页面

这相当于每次你想关闭应用程序时都要重新启动你的电脑。

这种方式或许有用，但这是一个非常糟糕的解决方案，不要这样做，我们来看看更好的方法。

不妥的方式：使用 v-if

v-if指令，该指令仅在组件为true时才渲染。 如果为false，则该组件在DOM中不存在。