vue组件值变化但不刷新问题怎么解决

本篇内容介绍了“Vue组件值变化但不刷新问题怎么解决”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

组件值变化但不刷新强制组件刷新

在调用组件的时候，如果数据中只是某个属性变化（比如id）变化，在vue开发工具中看到变量值变化，但是组件上的数据就是不刷新

bug复现

引用组件

<bulletMenuVue v-else-if="snode.type == 'cBomb'" :data="sNode" />

sNode数据结构

{    "id": "gun2m2c4",    "label": "子弹4",    "type": "cBomb",    "data": {        "angle": 50,        "mwr": {            "checked": false,            "band": 50,            "dbi": 50        },        "slr": {            "checked": false,            "length": 50,            "power": 50,            "facula": 50,            "size": 50        },        "irDetector": {            "checked": false,            "band": 50,            "dbi": 50        },        "mwd": {            "checked": false,            "band": 50,            "direction": 50,            "angle": 50        }    }}

当鼠标点击切换子弹过快时，会出现子组件不刷新的情况

解决

先看值有没有return出去！如果没有return，子组件也是不响应的，watchEffect甚至监听不到

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

我们可以将key分配给子组件，想重新渲染组件时，更新该key即可。这应该是强制Vue重新渲染组件的最佳方法

具体一点

把子弹的id当做key给组件，当作为key的id发生变化时，Vue将知道它必须销毁组件并创建一个新组件。我们得到的是一个子组件，它将重新初始化自身并“重置”其状态。

<bulletMenuVue v-else-if="sNode.type == 'cBomb'" :data="sNode" :key="sNode.id" />

强制刷新vue组件

例如我有一个表格，每次点击其中的一行弹出一个窗口，展示对应的信息，弹窗如下

<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFORMVisible" top="0">   <UserPage v-if="isshow" :userid="userid"/></el-dialog>

可见弹窗里面加载的其实是一个组件，组件通过判断当前点击行的id来进行不同数据的渲染

问题

发现，其实每次弹窗出来的数据都是第一次加载的数据，原因是根本没有重新加载，而只是将dialog里面的组件进行展示和隐藏而已

解决 – 强制刷新组件

给点击时间里面加上强制刷新组件的代码，如下

//methods中方法handleCreate(row) {  this.isShow = false//销毁组件  this.$nextTick(() => {      this.isShow = true//重建组件  })  //控制dialog的显示  this.dialogStatus = 'create'  this.dialogFormVisible = true  //传参  this.userid = row.approvalId.toString()}

“vue组件值变化但不刷新问题怎么解决”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！