vue组件值变化但不刷新强制组件刷新的问题

 更新时间:2022年06月29日 11:16:22   作者:腾梦  
这篇文章主要介绍了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 实现通过手机发送短信验证码注册功能

    vue 实现通过手机发送短信验证码注册功能

    这篇文章主要介绍了vue 实现通过手机发送短信验证码注册功能的相关资料,需要的朋友可以参考下
    2018-04-04
  • Vue 3.0中jsx语法的使用

    Vue 3.0中jsx语法的使用

    这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2020-11-11
  • 安装VUE-CLI一直失败的排错过程及解决方案

    安装VUE-CLI一直失败的排错过程及解决方案

    这篇文章主要介绍了安装VUE-CLI一直失败的排错过程及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • vue前端编译报错的图文解决方法

    vue前端编译报错的图文解决方法

    Vue框架可以很方便的引入各种插件,但是也因此会经常遇到种编译报错,这篇文章主要给大家介绍了关于vue前端编译报错解决的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • vue监视器@Watch创建执行immediate方式

    vue监视器@Watch创建执行immediate方式

    这篇文章主要介绍了vue监视器@Watch创建执行immediate方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue实现前端分页完整代码

    vue实现前端分页完整代码

    这篇文章主要为大家详细介绍了vue实现前端分页完整代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • vue项目中锚点定位替代方式

    vue项目中锚点定位替代方式

    今天小编就为大家分享一篇vue项目中锚点定位替代方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue-pdf实现在线预览PDF文件

    Vue-pdf实现在线预览PDF文件

    这篇文章主要为大家详细介绍了Vue-pdf实现在线预览PDF文件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Vue实现获取剪切板内容的两种方法

    Vue实现获取剪切板内容的两种方法

    这篇文章主要为大家详细介绍了Vue实现获取剪切板内容的两种方法,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以了解下
    2025-02-02
  • Vue.js 2.0学习教程之从基础到组件详解

    Vue.js 2.0学习教程之从基础到组件详解

    这篇文章主要介绍了Vue.js 2.0从基础到组件的相关资料,文中介绍的非常详细,对大家学习或者使用vue.js具有一定的参考价值,需要的朋友可以参考学习,下面来一起看看吧。
    2017-04-04

最新评论