vue强制刷新组件

迷南。 2021-09-16 07:40 506阅读 0赞

# **前言：** #

**       在开发过程中，有时候会遇到这么一种情况，通过动态的赋值，但是dom没有及时更新，能够获取到动态赋的值，但是无法获取到双向绑定的dom节点，这就需要我们手动进行强制刷新组件。**

**官网是这样说的：**

![70][]

可能你还不大理解，请继续往下看，下面是我的一个例子，来详细解说了这个方法的使用，

![70 1][]

第一个打印结果

![70 2][]

第二个打印结果

![70 3][]

/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

一、问题描述：父组件通过v-for渲染子组件，删除子组件数据出现异常。  
<code class="language-plain"><section v-if="isrefresh" v-for="(sign,index) in signs">      
   <sign-card></sign-card>    
</section></code>    
二、问题原因：出现异常的数据不是响应式依赖，是从vuex读取的。通过测试发现，父组件删除数据，没有重新创建子组件，怀疑是子组件异常的数据是读取的缓存副本。

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

1.设置一个数据变量isrefresh=true

![20181116113959873.png][]

2.初始v-if=isrefresh

![20181116114016834.png][]

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

![20181116114106997.png][]  
/\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*\*/

以上是我对这个Vue.$nextTick的简单了解，大家如果有疑问，大家可以留言交流，自由转载，请注明出处！！！

[70]: /images/20210813/0946f186654f4e8ab695a5f1845a061d.png
[70 1]: /images/20210813/2c978aede1c14ddaa6fa98ce0b815897.png
[70 2]: /images/20210813/9aa66d3be5da4e43b4aca7e1c521ff0f.png
[70 3]: /images/20210813/b2d4093b3bcf4abbb7446d45e1ea8acf.png
[20181116113959873.png]: /images/20210813/f1686b28234149d384da301c1b183066.png
[20181116114016834.png]: /images/20210813/768b9fd8642e4c2f95acc2e4ed3c0f0a.png
[20181116114106997.png]: /images/20210813/1e9972be6523467086c29d1b70aacc6b.png