Vue 组件强制刷新方式

🏆 文章目标：记录前端开发中遇见的问题。
🍀 Vue 组件强制刷新方式
✅ 创作者：Jay…
🎉 个人主页：Jay的个人主页
🍁 展望：若本篇讲解内容帮助到您，请帮忙点个赞吧，您的支持是我继续写作的最大动力，谢谢。🙏

需求

为实现动态页签组件，根据页签的类型获取对应的component。如视图类型的页签，只用于数据显示，不做任何增删查改；**多对多类型 **的页签，将实现对象与对象之间的绑定。每个component有不同的业务逻辑，自然组件封装的方式也不一样。

问题

可能某一个对象存在多个相同类型的页签，这样相同类型页签之间进行来回点击时，页签内的数据没有发生改变。

分析

组件地址相同时，来回点击存在缓存，页签相关的数据不会进行刷新。

源码简单介绍

activeComponent

通过 计算属性 根据 页签名称 动态获取对应的组件地址。

activeTabData 

通过 计算属性 根据 页签名称 动态获取当前页签对应详细参数，如

tab-object-id

、

tab-id

等

<template v-if="tabsList.length && tabName"><component
          :is="activeComponent":id="id":ref="activeComponent":instance-id="id":tab-type="activeTabData.type":tab-object-id="activeTabData.tabObjectId":tab-id="activeTabData.id":tab-unicode="activeTabData.unicode":tab-data="activeTabData"></component></template>

解决

通过改变一个变量来实现组件的强制刷新。但要注意的是，只要当key的值改变，组件就会自动刷新，所以key的值可以是任何类型，只要唯一即可。

<template v-if="tabsList.length && tabName"><component
          :is="activeComponent":key="activeTabData.unicode":id="id":ref="activeComponent":instance-id="id":tab-type="activeTabData.type":tab-object-id="activeTabData.tabObjectId":tab-id="activeTabData.id":tab-unicode="activeTabData.unicode":tab-data="activeTabData"></component></template>

其他解决方法

this.$forceUpdate()

子组件的强制刷新方法。当需要对当前组件进行强制刷新操作，可以调用

this.$forceUpdate()

强制刷新当前组件。

v-if

通过

v-if

,或者自定义函数来控制组件的显示/隐藏。但不满足当前需求，在点击其他页签时，所有页签都需要保持显示。

v-if

是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-show

不适合作为强制刷新组件的方式使用，因为

v-show

只是控制dom的显示或隐藏。