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

智能推荐

【论文汇总】2D目标检测文章汇总,持续更新_target-aware dual adversarial learning-程序员宅基地

文章浏览阅读1.8k次,点赞12次,收藏51次。记录自己比较感兴趣的2D目标检测文章。_target-aware dual adversarial learning

Java中的栈Stack、Deque、ArrayDeque、LinkedList_java中的栈类-程序员宅基地

文章浏览阅读1.1w次,点赞66次,收藏151次。文章目录先来说说Java中的Stack类不用Stack至少有以下两点原因该用ArrayDeque还是LinkedList?结论先来说说Java中的Stack类Java中Stack类从Vector类继承,底层是用数组实现的线程安全的栈。栈是一种后进先出(LIFO)的容器,常用的操作push/pop/peek。不过Java中用来表达栈的功能(push/pop/peek),更适用的是适用双端队列接口Deque,并用ArrayDeque/LinkedList来进行初始化。Deque<Integer&g_java中的栈类

Navicat 连接数据库出现1251_navicat11 1251-程序员宅基地

文章浏览阅读179次。MySql】Navicat 连接数据库出现1251。– 修改远程连接权限 % 可换为自己的电脑ip。_navicat11 1251

python3使用pymysql返回字典-程序员宅基地

文章浏览阅读872次。python3使用pymysql返回字典_pymysql返回字典

Shell脚本学习-阶段二十七-命令解释二_shell shuf-程序员宅基地

文章浏览阅读1.8k次。文章目录-命令解释二前言emacsjedjoenano================picosed===================vi,vim============mtype=============rgrep==========excmpbzcmpcommdiff===========bzdiffdiffstatdiff3find==============locate/slocate=========whereis==========updatedbwhich=========basena.._shell shuf

citespace使用流程(自用)_手把手教你用citespace-程序员宅基地

文章浏览阅读413次,点赞9次,收藏7次。然后再新建项目,选好data和project就可以了。四个文件夹建好,将下载好的Refworks数据。download_xxxx(这个自己定),放到文件夹input中,进行格式转化。然后将处理好的数据放到data中。_手把手教你用citespace

随便推点

TCP三次握手四次挥手详解_tcp三次挥手四次挥手-程序员宅基地

文章浏览阅读2k次。三次握手和四次挥手的总结_tcp三次挥手四次挥手

域账户信息导出脚本_Facebook OAuth漏洞导致的Facebook账户劫持-程序员宅基地

文章浏览阅读2k次。平时在用“Login with Facebook”功能进行跳转登录时,因为其用到了多个URL重定向跳转,所以总会给我有一种不安全的感觉。但是,要想发现Facebook漏洞,并非易事,需要莫大的功夫和精力,更别说涉及登录的Facebook OAuth了,这更是难上加难。然而,我就发现了Facebook OAuth这么一个漏洞,获得了Facebook官方$55,000的奖励。就是这么一个漏洞...

docker中容器和镜像的关系_docker镜像和容器的关系-程序员宅基地

文章浏览阅读5.7k次,点赞4次,收藏27次。docker中容器和镜像的关系_docker镜像和容器的关系

idea运行java报错:找不到或无法加载主类_idea找不到或无法加载java主类-程序员宅基地

文章浏览阅读4.3k次。idea运行java时报错 错误: 找不到或无法加载主类 _idea找不到或无法加载java主类

java scriptengine,使用Java ScriptEngine(Groovy),如何使它更具性能?-程序员宅基地

文章浏览阅读1.2k次。I am using ScriptEngine in my app to evaluate some client code in my application.The problem is it's not performant enough and I need to take measures to improve the time of execution.Currently, it ca..._scriptenginemanager 性能优化

docker项目运行环境搭建(JDK8、mysql8、tomcat9、redis5、nginx1.14)_docker jdk8-程序员宅基地

文章浏览阅读436次。1、在/home/mysql目录下新建两个文件夹,一个叫data另一个叫conf。_docker jdk8

推荐文章

热门文章

相关标签