【千方百计】更改绑定的数据对象数值后,DOM重新渲染的4种方法

news/2024/11/29 4:38:46/

本篇博客是博主记录在项目开发中遇到的Vue前端界面UI更新问题,界面更新就是对界面元素的更新。下述4中方法均是Vue框架本身提供的更新UI界面的API,按照接口对UI刷新操作后影响的程度进行升级描述。

在这里插入图片描述

详情见官网 Vue2 API介绍。

第一原则:既然使用了Vue,应该将作用域中的对象都成为响应式的,更改数据的时候,UI也跟着更新。但是总会遇到UI未更新的情况,因此,需要其它手段来达到UI更新的目的。

一般地将这4种方法用于v-model绑定数据更新失效的场景下进行UI重新渲染。

1、深度拷贝

APIVue.set( target, propertyName/index, value )
类型:全局API
影响程度:较小

该函数,向响应式对象中添加一个 property,并确保这个 property 同样是响应式的,且触发视图更新。

它必须用于向响应式对象上添加 property,因为 Vue 无法探测普通的新增 property 。比如 ,

this.myObject.newProperty = 'hi'

这玩意影响最轻,在开发中不容易出效果。

在这里插入图片描述

2、下次钩子

APInextTick()
类型:全局API
影响程度:小

该函数相信做过Vue相关项目开发的再熟悉不过了,作为一个回调函数,等到下一次DOM完成渲染时,调用该函数。

一般地,应用场景就是,在修改数据之后立即使用这个接口方法,获取更新后的 DOM

3、对象引用

APIvm.$el
类型:全局API
影响程度:中

在实例挂载之后,元素可以用 vm.$el 访问。访问之后,通过修改DOM元素的值达到修改UI的目的。

实例:

//更改输入框的值为空
this.$refs.moneyInput.value = ''

4、强制刷新

APIvm.$el
类型:全局API
影响程度:大

该函数迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

在上述3种方案解决不了的情况下,就启动这个应急方法forceUpdate,顾名思义,强制刷新。

这个API副作用太大,不到迫不得已不使用。


http://www.ppmy.cn/news/259484.html

相关文章

千方百剂创建账套服务器文件,千方百剂辅助工具使用手册(图解

《千方百剂辅助工具使用手册(图解》由会员分享,可在线阅读,更多相关《千方百剂辅助工具使用手册(图解(17页珍藏版)》请在人人文库网上搜索。 1、千方百剂各工具使用千方百剂医药管理系统为广大用户提供了各种各样的使用工具,使大家在操作千方百剂医药管理系统更加得心应手,…

教你六步写好一篇学术论文

https://zhuanlan.zhihu.com/p/36164758 教你六步写好一篇学术论文 [图片上传失败...(image-9017eb-1613657042109)] 知然 道虽小&#xff0c;不行不至&#xff1b;事虽小&#xff0c;不为不成 273 人赞同了该文章 </header> 本人在论文写作过程中受胡键老师的《教你六步…

揭秘:NFT智能合约到底都干了什么?

NFT智能合约是什么东西&#xff1f; 就是能实现NFT基本功能的在区块链上的代码。 一个NFT智能合约&#xff0c;应该怎么写&#xff0c;应该实现什么功能&#xff1f; 如果你正在学习这方面知识&#xff0c;而且一知半解的样子&#xff0c;本文能让你醍醐灌顶。 本文面向的还是小…

到底什么是载波聚合(CA)?

1 为什么需要载波聚合&#xff1f; 一般来说&#xff0c;要提升网速或者容量&#xff0c;有下面几个思路&#xff1a; 建更多的基站&#xff1a;这样一来同一个基站下抢资源的人就少了&#xff0c;网速自然就上去了。但缺点是投入太大了&#xff0c;运营商肯定不会做亏本的买卖…

千方百计获取百度网盘下载链接

千方百计获取百度网盘下载链接 重要的事情说三遍&#xff1a; 高手勿喷&#xff01; 高手勿喷&#xff01; 高手勿喷&#xff01; 以前看过一篇帖子是在手机上获取百度云的下载链接然后在发送到电脑上, 这样的话百度云后台会判定为两次请求, 请求同一地址, 现在是不被允许的。 …

关于职业规划最好最全面的一篇文章

文章目录 关于职业规划最好最全面的一篇文章第一章 职业生涯扬帆于选择第二章 价值观之于职业规划第三章 职业规划选择之一 ——地域首当其冲第四章 职业规划选择之二 ——行业选择要有内在连续性第五章 职业规划选择之三 ——合适的企业第六章 职业规划选择之四 ——职业选定主…

一场疫情让我明白:当死亡来临时,什么才是最好的告别

作者 | 飞白 来源 | 精读&#xff08;ID: Jingdu999&#xff09; 01 因为疫情的关系&#xff0c;最近大概是我对死亡感受最深的一次。 一开始&#xff0c;看着新闻里那一点一点增加的“累计死亡”数字&#xff0c;只觉心里有些感慨。 直到前两天&#xff0c;我看到一个微博热…

我看过的关于职业规划最好最全面的一篇文章

原文地址&#xff1a;http://blog.csdn.net/u011300418/article/details/51363106 在担任公司高管的几年间&#xff0c;我面试过数以百计的各个层面的员工&#xff0c;其中最让我感到遗憾的一个现象就是很多人有着非常好的素质&#xff0c;甚至有的还是名校的毕业生&#xff0c…