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

vue中的$forceUpdate()、$set()

$forceUpdate()

迫使vue实例重新(rander)渲染虚拟dom,注意并不是重新加载组件。
结合vue的生命周期,调用 $forceupdate 后只会触发beforeupdateupdated这两个钩子函数,不会触发其他的钩子函数。它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件

页面传的数值动态改变,接口接受的参数也就动态更改,但接收的数据有时候不会及时不变,通过this.$forceUpdate()页面强制刷新来解决这个问题

首先我们知道在vue中,数据的绑定都不用我们操心,例如在data中有一个msg的变量,你修改它,那么在页面上,msg的内容就会自动发生变化。但是如果对于一个复杂的对象,例如一个对象数组,你直接去给数组上某一个元素增加属性,或者直接把数组的length变成0,vue就无法知道发生了改变。

change: function(index) {//增加性别属性this.list[index].sex = '男';
},
clear: function() {//清空数组this.list.length = 0;
}

使用$forceUpdate()

change: function(index) {this.list[index].sex = '男';this.$forceUpdate();
},
clear: function() {this.list.length = 0;this.$forceUpdate();
}

使用$set

change: function(index) {//增加性别属性this.$set(this.list[index],'sex','男')
},
clear: function() {//清空数组this.list=[];
}

注意:但是$forceUpdate()这种做法并不推荐,官方说如果你现在的场景需要用$forceupdate方法,那么99%是你的操作有问题,比如data里不显示声明对象的属性,之后添加属性时正确的做法时用 vm.$set() 方法,所以$forceupdate请慎用。

相关问题

在使用Element-Ui的select组件时,在设置了初始值后,重新选择select下拉后出现了下拉无法回显的情况,但是在进行了表单的其他项的操作后,select的选择就马上回显了
经过排查也不是下拉框绑定的值有问题
最后发现是data数据的层级过深,导致无法响应式显示
解决方法一:

this.$set(this.form, 'postIds', res.postIds)

解决方法二:

在对应的select组件增加@change事件,事件对应为$forceUpdate()即可

在这里插入图片描述

http://www.lryc.cn/news/23642.html

相关文章:

  • 记住这3点,有效提高江苏专转本上岸率
  • 【经验总结】10年的嵌入式开发老手,到底是如何快速学习和使用RT-Thread的?(文末赠书5本)
  • 人大金仓和达梦的空间数据能力对比
  • 探析集团企业 1+N 模式,重新定义集团型CRM
  • 卡特兰数
  • 分布式任务处理
  • Linux 命令复习
  • leetcode 困难 —— 天际线问题(优先队列)
  • 离散数学笔记_第一章:逻辑和证明(2 )
  • MFCC语音特征值提取算法
  • TencentOS3.1编译安装redis6.2.5
  • AI顶会accepted papers list
  • IOS逆向之frida安装
  • 《金山区提信心扩需求稳增长促发展行动方案》的通知
  • 【Redis】Java客户端JedisSpringDataRedis入门(三)
  • 挑选销售自动化工具应该关注什么功能?
  • thread.join 是干什么的?原理是什么?
  • 论文阅读 | Cross-Attention Transformer for Video Interpolation
  • 【C++修炼之路】22.哈希
  • HashMap原理(一):哈希函数的设计
  • 06--WXS 脚本
  • 【Vue3】vue3 + ts 封装城市选择组件
  • C语言if判断语句的三种用法
  • React中echarts的封装
  • IV测试系统3A太阳能模拟器在光伏中应用
  • Vue 中过滤器 filter 使用教程
  • 源码numpy笔记
  • 【VUE】六 路由和传值
  • ChatGPT修炼指南和它的电力畅想
  • 基于vscode开发vue项目的详细步骤教程