怎么在Vue中强制组件重新渲染

　　介绍

怎么在Vue中强制组件重新渲染?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

<强>简单粗暴的方式:重新加载整个页面

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

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

<强>不妥的方式:使用v

v指令,该指令仅在组件为真时才渲染。如果为假,则该组件在DOM中不存在。

来看看,v是怎么工作的,在模板中,添加v指令:

& lt; template> 　　,& lt; my-component  v=皉enderComponent",/比; 　　& lt;/template>

在脚本中,使用nextTick的方法

& lt; script> 　　,export  default  { 　　数据才能(),{ 　　,,return  { 　　,,,renderComponent:,真的, 　　,,}; 　　,,}, 　　方法:才能,{ 　　,,forceRerender (), { 　　,,,//,从,DOM 中删除,my-component 组件 　　,,,this.renderComponent =,假; 　　,,,, 　　,,,这个。nextTick美元((),=祝辞,{ 　　,,,,//,在,DOM 中添加,my-component 组件 　　,,,,this.renderComponent =,真的; 　　,,,}); 　　,,} 　　,,} 　　,}; 　　& lt;/script>

上面的过程大致如下:

刚开始renderComponent设置为真的,因此渲染组件组件
当我们调用forceRerender时,我们立即将renderComponent设置为假
我们停止渲染组件,因为v指令现在计算结果为假
在nextTick方法中将renderComponent设置回真正的
当v指令的计算结果为真时,再次渲染组件

在这个过程中,有两个部分比较重要

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

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

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

另外,nextTick可以与承诺一起使用:

forceRerender (), { 　　,//从,DOM 中删除,my-component 组件=,this.renderComponent 假; 　　 　　这。美元nextTick(),然后((),=祝辞,{ 　　this.renderComponent =,才能正确; 　　,}); 　　}

不过,这并不是一个很好的解决方案,所以,让我们做Vue想让我们做的

<强>较好的方法:forceUpdate方法

这是解决这个问题的两种最佳方法之一,这两种方法都得到了Vue的官方支持。

通常情况下,Vue会通过更新视图来响应依赖项中的更改。然而,当我们调用forceUpdate时,也可以强制执行更新,即使所有依赖项实际上都没有改变。

下面是大多数人使用这种方法时所犯的最大错误。

如果Vue在事情发生变化时自动更新,为什么我们需要强制更新呢?

原因是有时候Vue的响应系统会让人感到困惑,我们认为Vue会对某个属性或变量的变化做出响应,但实际上并不是这样。在某些情况下,Vue的响应系统根本检测不到任何变化。

所以就像上一个方法,如果你需要这个来重新渲染你的组件,可能有一个更好的方法。

有两种不同的方法可以在组件实例本身和全局调用forceUpdate:

//,全局 　　import  Vue 得到& # 39;vue # 39;; 　　Vue.forceUpdate ();//,使用组件实例 　　export  default  { 　　,方法:{ 　　methodThatForcesUpdate才能(),{//,,,… 　　美元,才能这样。forceUpdate ();//,,,… 　　,,} 　　,} 　　}

重要提示:这不会更新任何计算属性,调用forceUpdate仅仅强制重新渲染视图。

<强>最好的方法:在组件上进行关键更改

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

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

正是我们需要的!

但是首先,我们需要绕一小段路来理解为什么在Vue中使用关键。

为什么我们需要在Vue中使用关键
一旦你理解了这一点,那么这是了解如何以正确方式强制重新渲染的很小的一步。

假设我们要渲染具有以下一项或多项内容的组件列表:

怎么在Vue中强制组件重新渲染