当前位置: 首页 > news >正文

vue强制刷新组件的三种方式:$forceupdate、v-if、key

项目中遇到父组件给封装子组件传值,传的值改变后,页面显示没有进行相对的更改,针对解决这个问题进行三种组件刷新方式的使用记录。

1、$ forceupdate()

说明:$ forceupdate()方法是官方提供的方法, f o r c e U p d a t e 仅仅触发 b e f o r e U p d a t e 以及 u p d a t e d 钩子,也就是说, forceUpdate 仅仅触发beforeUpdate以及updated钩子,也就是说, forceUpdate仅仅触发beforeUpdate以及updated钩子,也就是说,forceUpdate 只是让vue重新渲染了一遍试图,并不会让组件先注销再重新创建。data、computed 不会被重置,created、mounted等钩子函数也不会被执行。 重新渲染不等于组件重载。

使用场景:当data中的某个内容进行了改变,但是页面没有进行实时的刷新,而通过打印能确定数据确实改变,此时可以使用$ forceupdate()来迫使当前组件刷新,但是仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

注:$ forceupdate()仅针对当前组件以及其插槽相关子组件,且子组件是否被渲染取决于组件标签内是否添加了内容。

2、v-if

v-if通过变量控制的形式是真的销毁 DOM,渲染开销比较大。可以触发被控制的组件 beforeCreate、created、beforeMount、mounted、beforeDestroy、destroyed 这6个生命周期,通过 v-if 实现强制刷新的开销要远远大于 $forceUpdate。

3、key属性

使用该属性需要保持key在页面的唯一性,不然会造成渲染错误,此属性是将子组件的 key 修改,这样Vue 就会认为子组件不能再使用了。会把旧 key 对应的子组件注销卸载,创建基于新 key 的子组件。因此,会触发完整的生命周期钩子。基本等同于v-if,实现强制刷新的开销也要远远大于 $forceUpdate,等同于v-if。


http://www.mrgr.cn/news/35099.html

相关文章:

  • Redhat7.9 安装 KingbaseES 金仓数据库 V9单机版(静默安装)
  • 关于 3D Engine Design for Virtual Globes(三维数字地球引擎设计)
  • MySQL中字段类型和Java对象中的数据类型对应关系
  • VUE3+Three.js搭建教程
  • Elman 神经网络算法详解
  • 【再谈设计模式】建造者模式~对象构建的指挥家
  • Spring Boot 学习之路 -- 处理 HTTP 请求
  • 基于深度学习的花卉智能分类识别系统
  • 仿黑神话悟空跑动-脚下波纹特效(键盘wasd控制走动)
  • 五种方式帮你提升独立站销售额
  • Frp经常连接不上?查看Frp常见问题排查
  • SSM+Vue共享单车管理系统
  • 分布式光伏监控系统 在鄂尔多斯市鄂托克旗某煤矿项目中的应用
  • 电路 - 笔记2
  • R包:gplots经典热图
  • 城市污水管网流量在线监测系统解决方案
  • 集成运放UA741的原理与应用的探索
  • 关于中断和异常的一些理解
  • 消息中间件常见面试题(RabbitMQ)
  • typeScript常用写法-请求篇
  • [spring]用MyBatis XML操作数据库 其他查询操作 数据库连接池 mysql企业开发规范
  • python教程修订版
  • harmonyos面试题
  • YoloV8改进策略:BackBone改进|PoolFormer赋能YoloV8,视觉检测性能显著提升的创新尝试
  • 数据库如何优化,怎么提升性能与效率呢?(建议收藏)
  • MySQL—触发器详解