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()
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3中effect函数到底是什么详解

    vue3中effect函数到底是什么详解

    Effect几乎是Vue3.0中最重要的一个功能了,计算属性监听函数都是基于effect实现的,下面这篇文章主要给大家介绍了关于vue3中effect函数到底是什么的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • VUE识别访问设备是pc端还是移动端的实现步骤

    VUE识别访问设备是pc端还是移动端的实现步骤

    经常在项目中会有支持pc与手机端需求,并且pc与手机端是两个不一样的页面,这时就要求判断设置,下面这篇文章主要给大家介绍了关于VUE识别访问设备是pc端还是移动端的相关资料,需要的朋友可以参考下
    2023-05-05
  • vue-router实现webApp切换页面动画效果代码

    vue-router实现webApp切换页面动画效果代码

    本篇文章主要介绍了vue实现app页面切换效果实例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-05-05
  • vue如何使用process.env搭建自定义运行环境

    vue如何使用process.env搭建自定义运行环境

    这篇文章主要介绍了vue如何使用process.env搭建自定义运行环境,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • Vue实现文件切片上传功能的示例代码

    Vue实现文件切片上传功能的示例代码

    在实际开发项目过程中有时候需要上传比较大的文件,然后呢,上传的时候相对来说就会慢一些,so,后台可能会要求前端进行文件切片上传。本文介绍了Vue实现文件切片上传的示例代码,需要的可以参考一下
    2022-10-10
  • element-ui form表单的动态rules校验功能实现

    element-ui form表单的动态rules校验功能实现

    在vue项目中,有时候可能会用到element-ui form表单的动态rules校验,这篇文章主要介绍了element-ui form表单的动态rules校验,我们可以巧妙的运用element-ui form表单里面form-item的校验规则来处理,本文结合实例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • 写一个Vue loading 插件

    写一个Vue loading 插件

    这篇文章主要介绍了如何写一个Vue loading 插件,帮助大家更好的理解和学习vue 插件的相关知识,感兴趣的朋友可以了解下
    2020-11-11
  • vue实现word,pdf文件的导出功能

    vue实现word,pdf文件的导出功能

    这篇文章给大家介绍了vue实现word或pdf文档导出的功能,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
    2018-07-07
  • vue 项目中使用websocket的正确姿势

    vue 项目中使用websocket的正确姿势

    这篇文章主要介绍了vue 项目中使用websocket的实例代码,通过实例代码给大家介绍了在utils下新建websocket.js文件的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-01-01
  • 详解Vuex管理登录状态

    详解Vuex管理登录状态

    这篇文章主要介绍了详解Vuex管理登录状态,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11

最新评论