vue强制更新数据$forceUpdate()和this.$set()-程序员宅基地

技术标签: vue.js  

方法一、

添加this.$forceUpdate();进行强制渲染,效果可以实现。(用来全局强制刷新,性能消耗高)

从搜索资料得出结果:因为数据层次(for循环太多)太多,render函数没有自动更新,需手动强制刷新。

调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。

我是在使用多层for循环嵌套时出现的页面没有及时刷新改变后的值的问题( 使用this.$forceUpdate() )

使用方法:

input( ) {
                // vue2的引擎这种数组下标去改变数据的时候视图不会刷新
                this.arr[0]= 10000
                console.log(this.arr)
                // vue2知道自己的bug 全局提供给所有实例了 一个方法 
                // $forceUpdate()  可以让算法重新计算 刷新更新页面 
                this.$forceUpdate()
}

在方法执行完毕后,添加this.$forceUpdate()


方法二、

使用vue中的方法this.set(object, index, new) ,this.set()方法是vue自带的可对数组和对象进行赋值,并触发监听的方法。(用来指向性强制刷新,性能消耗低

参数一:你要改变的数组或对象
参数二:下标,或者元素名称
参数三:得到的新的值


使用方法:

ace(item,index) {
				this.arr[index]=this.arr[index]*10
				this.$set(this.arr,index,this.arr[index])
                // 参数一:你要改变的数组或对象
				// 参数二:下标,或者元素名称
				// 参数三:得到的新的值
}

或者使用set()的另外一种方法:Vue.set(参数一,参数二,参数三)

使用方法:

// this.$set(this.arr[1],'color','黄色香蕉')
   Vue.set(this.arr[1],'color','黄色香蕉')


 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/lipeng_kaka/article/details/118942442

智能推荐

SCI论文写作常用表达整理_sci写作comments-程序员宅基地

文章浏览阅读3.6k次,点赞6次,收藏23次。目录解释为什么你的主题X是重要的概述X研究的过去和现在的历史(没有直接参考文献)描述X研究可能的未来指示知识上的差距和可能存在的局限性说明论文的目的及其贡献(Abstract,Introduction)解释你所在领域的关键术语解释你将如何在论文中使用术语和缩写给出论文的结构,包括什么与不包括什么全面介绍从过去到现在的文献回顾过去的文献回顾随后的和最..._sci写作comments

字节跳动云原生大数据平台运维管理实践_云原生在大数据平台的实践应用-程序员宅基地

文章浏览阅读1.2k次。字节跳动过去几年在支撑自身业务的过程中积累了很多大数据领域的引擎工具,目前也在探索将这些引擎工具的能力进行标准化、产品化的输出。组件繁多:大数据领域完成一项工作需要很多组件配合。比如分布式大数据存储及各种任务执行引擎:Flink、Spark 及各种 ETL 的 OLAP 工具和调度 ETL 的任务调度工具,还有支撑工具引擎的运行日志监控系统和项目用户权限的辅助系统等;部署复杂:这些系统的组件繁多,相互配合也非常复杂,导致部署变得困难。比如部署一套完整的生产环境,可能会涉及到多个依赖和配置管理。_云原生在大数据平台的实践应用

PFMEA详解结构分析——Sun FMEA软件_pfmea分析软件-程序员宅基地

文章浏览阅读220次。同样的道理,PFMEA也需要事先策划范围,一般的指导思想是,那些有安全或法律法规影响的、创新程度比较大的、可靠性要求比较高的部分需要重点关注,因为这些地方要么容易发生问题,要么一旦发生问题,影响就特别巨大。结构分析在表格软件中则是以不同列的形式表达不同层次的结构元素,中间列是关注元素,即过程,它的左边列是该过程所属的流程,而右边列是该过程的工作元素。因此,需要仔细地审查生产的价值流从而避免漏失。需要注意的是,FMEA是活的文件,它将一直伴随着产品和过程,为它们保驾护航,将产品和过程的风险保持在合理的范围。_pfmea分析软件

Maven的下载安装配置教程(详细图文)_maven下载-程序员宅基地

文章浏览阅读10w+次,点赞271次,收藏583次。目录一、简单了解一下什么是Maven二、maven的下载三、maven的安装四、maven的环境变量配置五、setting文件配置六、开发工具配置Maven一、简单了解一下什么是MavenMaven就是一款帮助程序员构建项目的工具,我们只需要告诉Maven需要哪些Jar 包,它会帮助我们下载所有的Jar,极大提升开发效率。1.Maven翻译为“专家“, ”内行”的意思,是著名Apache公司下基于Java开发的开源项目。2.Maven项目对象模型(POM)是一.._maven下载

探索科技新星:Cosmos - 构建区块链互联的未来-程序员宅基地

文章浏览阅读475次,点赞22次,收藏20次。探索科技新星:Cosmos - 构建区块链互联的未来项目地址:https://gitcode.com/qicosmos/cosmosCosmos 是一个开放源代码项目,致力于解决区块链之间的互操作性问题,创建一个由多个独立、平行运行的区块链组成的网络,这些区块链之间可以相互通信和交易。这个项目的技术创新和实用价值已经吸引了全球众多开发者的关注。技术解析Tendermint 共识算法Co...

电阻电位器电子尺信号采集转换为标准Modbus TCP协议-程序员宅基地

文章浏览阅读140次。产品概述:WJ183产品是一种物联网和工业以太网采集模块,实现了传感器与网络之间形成透明的数据交互。可以将传感器的模拟量数据转发到网络。

随便推点

golang微服务框架go-zero系列-2:在go-zero中使用jwt-token鉴权实践-程序员宅基地

文章浏览阅读2.6k次。阅读本文前你需要阅读金光灿灿的Gorm V2+适合创业的golang微服务框架go-zero实战创建项目生成go.mod文件以如下指令创建项目mkdir jwttokencd jwttokengo mod init jwttoken定义user.api本文设计API如下描述格式方法参数返回是否需要鉴权用户登录/open/authorizationpostmobile:手机号,passwd:密码,code:图片验证码id:用户ID,token:用户t

深度学习框架-Keras:特点、架构、应用和未来发展趋势_keras框架-程序员宅基地

文章浏览阅读1.5k次。深度学习是一种新兴的技术,已经在许多领域中得到广泛的应用,如计算机视觉、自然语言处理、语音识别等。Keras是深度学习的一种重要框架,它具有许多优点,如简单易用、模块化、多后端支持等。Keras核心是Keras的主要库,它提供了一些高级API,如Sequential和Functional API,可以方便地构建和训练神经网络模型。语音识别是另一个深度学习的重要领域,Keras可以在语音识别中得到广泛应用。Keras是一种简单易用的深度学习框架,它提供了一些高级API,可以方便地构建和训练神经网络模型。_keras框架

点滴学习Linux --- Vim 代码块缩进快捷键_linux代码缩进快捷键-程序员宅基地

文章浏览阅读6k次,点赞4次,收藏3次。使用vim进行代码编写时,我们进行需要对代码进行对其。本人之前采用的都是笨方法,一行一行的对其,这样不但效率低,而且还可能出现错误,那vim中有没有自带代码缩紧功能呢?答案是肯定的。1.使用Shift +V 选择你要缩进的行2.按下‘=’即可是不是很简单?_linux代码缩进快捷键

Docker Review - Docker 概念 & 入门篇_review docker tool-程序员宅基地

文章浏览阅读1.7w次。文章目录概述What's Docker ?概述使用Docker技术可以帮助企业快速水平扩展服务,从而到达弹性部署业务的能力。在云服务概念兴起之后,Docker的使用场景和范围进一步发展,如今在微服务架构越来越流行的情况下,微服务+Docker的完美组合,更加方便微服务架构运维部署落地。What’s Docker ?..._review docker tool

java计算机毕业设计基于安卓Android的谷惠农产品线上销售APP-ssm_农产品销售app设计与实现-程序员宅基地

文章浏览阅读88次。本app设计的现状和趋势,从需求、结构、数据库等方面的设计到app的实现,分别为前后端实现。本app根据现实情况来选择一种可行的开发方案,借助java编程语言和MySQL数据库等实现app的全部功能,接下来对系统进行测试,测试系统是否有漏洞和测试用户权限来完善app,最终app完成达到相关标准。谷惠农产品线上销售APP能够通过互联网得到广泛的、全面的宣传,让尽可能多的用户了解和熟知谷惠农产品线上销售APP的便捷高效,不仅为群众提供了服务,而且也推广了自己,让更多的群众了解自己。数据库:mysql 5.7;_农产品销售app设计与实现

「Linux」- 搭建 NFS 服务(CentOS) @20210122_nfs 1.3.0升级-程序员宅基地

文章浏览阅读88次。NFS 1.3.0 on ClearOS 7.5操作系统:ClearOS release 7.5.0 (Final)软件版本:nfs-utils 1.3.0# 安装并启动服务yum install -y nfs-utils nfs-utils-libsystemctl start nfs-server.servicesystemctl enable nfs-server.service# 修改配置:到处目录cat >> /etc/exports.d/foo.expo._nfs 1.3.0升级