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

智能推荐

「分享」Word文档被锁定无法编辑怎么办?4种方法解决_docx被锁定无法编辑-程序员宅基地

文章浏览阅读3.7k次。Word文档被锁定了无法编辑,那就试试这4种方法吧!_docx被锁定无法编辑

三种技术实现PC1、PC2与PC3都通,而PC1与PC2不通_ensp 让pc1和pc3能互相通信,它们与pc2不能通信-程序员宅基地

文章浏览阅读2.6w次,点赞15次,收藏49次。这里我用华三的eNSP模拟器做实验,其实三种技术都是很简单的,我这里主要解释模拟实验的配置问题,就不过多的补充理论知识了哈。法一:VLAN的Hybrid端口类型首先,先说明一点,华三交换机端口默认类型是Access,用命令“display interface brief”就可以知道;华为交换机端口默认类型是Hybrid,用命令“display port vlan”查看。下面贴上实图:..._ensp 让pc1和pc3能互相通信,它们与pc2不能通信

黑客之google入侵网站常用方式-程序员宅基地

文章浏览阅读475次。利用google搜索关键字入侵漏洞网站 1、到GoogLe,搜索一些关键字,edit.asp? 韩国肉鸡为多,多数为MSSQL数据库!  2、到Google ,site:cq.cn inurl:asp  3、利用挖掘鸡和一个ASP木马. 文件名是login.asp 路径组是/manage/ 关键词是went.asp 用'or'='or'来登陆  4、关键字:Co Net MI..._goingta 网站入侵

automapper自动创建映射,使用AutoMapper映射子集合-程序员宅基地

文章浏览阅读222次。I am using Automapper for making a copy of an objectMy domain can be reduced into this following exampleConsider I have a Store with a collection of Locationpublic class Store{public string Name { get..._automapper 子集合

第九章 SpringBoot缓存-方法的缓存❤❤

基于Ehcache或Redis通过注解Cacheable,CachePut及CacheEvict实现

Baumer工业相机堡盟工业相机如何通过BGAPISDK进行定序器编程:根据每次触发信号移动感兴趣区域(C#)-程序员宅基地

文章浏览阅读242次。Baumer工业相机堡盟工业相机如何通过BGAPISDK进行定序器编程:根据每次触发信号移动感兴趣区域(C#)

随便推点

如何确定当前项目是采用 Vite 还是 Vue CLI 项目

检查项目根目录下是否有一个名为或的文件。这是 Vite 项目的配置文件。在文件中,查看和部分是否包含vite和(对于 Vue 3)或(对于 Vue 2)。

如何在Linux服务器上安装Stable Diffusion WebUI

如何在Linux服务器上安装Stable Diffusion WebUI

Stable Diffusion一键安装包启动疑难报错解析:Python 无法找到模块‘urlib’以及其他报错的解决方法

如果您遇到 ModuleNotFoundError: No module named ‘_socket’ 错误,这可能意味着您的 Python 安装存在问题或缺少了某些核心组件。对于不熟悉SD内部工作原理的用户来说,这无疑增加了解决问题的难度。(简称SD)这一强大技术的旅程中,我们有时可能会遇到一些始料未及的问题。其中,启动一键安装包时遭遇的“Python 无法找到模块‘urlib’”的报错,就是许多新手用户可能会碰到的一个挑战。在使用图生图功能时遇到错误提示,显示为“'Image'对象不支持下标操作”。

【随想录】Day34—第八章 贪心算法 part03

每到一个站点后,此时是有补充有消耗的,关注点:当前还剩余多少油。

influx 操作_Influxdb简单实用操作-程序员宅基地

文章浏览阅读650次。新的infludb版本已经取消了页面的访问方式,只能使用客户端来查看数据一、influxdb与传统数据库的比较库、表等比较:influxDB传统数据库中的概念database数据库measurement数据库中的表points表里面的一行数据influxdb数据的构成:Point由时间戳(time)、数据(field)、标签(tags)组成。Point属性传统数据库中的概念time每个数据记录时间...

推荐文章

热门文章

相关标签