Vue中重新渲染组件的方法总结

Posted 2023-03-27

参考技术A

有时Vue的反应性系统还不够，您只需要重新渲染组件即可。
重新渲染组件有以下几个办法：

1.可怕的方法：重新加载整个页面
2.可怕的方法：使用v-if
3.更好的方法：使用Vue的内置forceUpdate方法
4.最好的方法：在组件上进行key更改

非常不建议这样做，我们来看下一个办法。

v-if指令，该指令仅在组件为true时才渲染。 如果为false，则该组件在DOM中不存在。
下面我们设置它以使其v-if能够正常工作的方式。

在您的template，您将添加v-if指令：

script您将添加使用以下方法nextTick：

这里发生的事情：
1.最初 renderComponent 设置为 true ，因此 my-component 组件渲染
2.在 forceRerender 中我们立即设置 renderComponent 为 false
3.停止渲染组件 my-component ，因为该 v-if 指令现在的值为 false
4.在 nextTick 中将 renderComponent 上设置回 true
5.现在该 v-if 结果为 true ，因此我们 my-component 再次开始渲染

我们必须等到 nextTick ，否则我们不会看到任何变化。

在Vue中，一个 nextTick 是一个DOM更新周期。Vue将收集在同一 nextTick 中进行的所有更新，在 nextTick 结束时，它将根据这些更新来渲染 DOM 中的内容。如果我们不等到 nextTick ，我们对 renderComponent 的更新就会自动取消，什么也不会改变。

其次，当我们第二次渲染时，Vue将创建一个全新的组件。 Vue 将销毁第一个，并创建一个新的，这意味着我们的新 my-component 将像正常情况一样经历其所有生命周期- created ， mounted 等。

这是解决此问题的两种最佳方法之一，此方法得到Vue的官方支持。

forceUpdate 在组件实例本身以及全局实例上，可以通过两种不同的方式调用：

重要提示 ：这不会更新您拥有的任何计算属性。调用 forceUpdate 只会 强制重新渲染视图

在许多情况下，我们需要重新渲染组件。

要正确地做到这一点，我们将提供一个key属性，以便 Vue 知道特定的组件与特定的数据片段相关联。如果key保持不变，则不会更改组件，但是如果key发生更改，Vue 就会知道应该删除旧组件并创建新组件。

我们可以采用这种将key分配给子组件的策略，但是每次想重新渲染组件时，只需更新该key即可。

每次 forceRerender 被调用时，我们的 componentKey 都会改变。当这种情况发生时，Vue将知道它必须销毁组件并创建一个新组件。我们得到的是一个子组件，它将重新初始化自身并“重置”其状态。

原文： https://hackernoon.com/

在vue中让某个组件重新渲染的笨方法

　　在vue中，推崇的是数据驱动也就是数据更新进而使组件得以重新渲染；在某些情况下，我们想要在数据不改变的情况下，重新渲染组件；我遇到的一个情况是：同一个页面，两个tab页分别为tab1和tab2，公用了一个组件，在tab1页修改了数据，再去tab2页查看的时候，发现tab1修改的数据会在tab2中的组件中显示，为了能够使得公用的组件重新渲染，可以使用v-if指令进行合理处理。