本文主要介绍vue强制刷新组件的方法示例，通过示例代码非常详细的介绍，对大家的学习或者工作有一定的参考价值。有需要的朋友下面和边肖一起学习。

前言：

在开发过程中，我们有时会遇到这样的情况。通过动态赋值，但是dom没有及时更新，我们可以得到动态赋值的值，但是无法得到双向绑定的dom节点，这就需要我们手动刷新组件。

官网是这样说的：

你可能不明白，请继续读下去。下面我举一个例子来详细说明这种方法的用法。

第一次打印结果

第二次打印结果

1.问题描述：父组件通过v-for渲染子组件，删除子组件数据时出现异常。

code class=' language-plain ' section v-if=' is fresh ' v-for='(signs，index) in signs '

标志卡

/部分/代码

二、问题原因：异常数据不是响应依赖，而是从vuex读取的。通过测试，发现父组件删除了数据，但没有重新创建子组件。被子组件怀疑为异常的数据是读缓存副本。

三、问题解决：根据v-if改变dom结构的特点，手动重新创建子组件。

1.设置数据变量isrefresh=true。

2.初始v-if=isrefresh

3.删除时配合$nextTick()DOM渲染回调函数重新创建子组件。

/************************************************************************************************************************************/

Ps: vue强制刷新子组件

将组件重置为其初始状态是一个常见的要求。推荐两种方法，一种是父组件重置子组件的prop，另一种是子组件公开一个重置方法供父组件调用。但是，有时子组件不提供重置方法或属性来重置它们的状态。更重要的是，我们不能移动这个子组件。所以我们需要一种黑客方式来强制子组件重置到初始状态。该方法如下：

//原理是使用v-if会破坏组件，重新绘制，会使组件过载。

//子组件：自身封装的组件。

income statistics v-if=' DestroyIncomeStatistics==true '

ref=' income statistics child '/income statistics

//然后在父组件中的add、delete、query方法中操作，就可以了。

这个。DestroyIncomeStatistics=false

//然后在你的方法成功之后

//Vue实现响应不是指数据改变后DOM立即改变，而是按照一定的策略更新DOM。

//在vue的深度响应原理中有解释：

//$nextTick是在下一个DOM更新周期结束后执行延迟回调。如果在修改数据后使用$nextTick，可以在回调中获得更新后的DOM。

这个。$nextTick(()={

这个。DestroyIncomeStatistics=true

});

//在这种情况下，将完成强制刷新。

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。