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

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

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


1666275692507.jpg


详情见官网 Vue2 API介绍


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


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


1、深度拷贝


API:Vue.set( target, propertyName/index, value )

类型:全局API

影响程度:较小


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


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

this.myObject.newProperty = 'hi'

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


1666275753981.jpg


2、下次钩子


API:nextTick()

类型:全局API

影响程度:小


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


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


3、对象引用


API:vm.$el

类型:全局API

影响程度:中


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


实例:

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


4、强制刷新


API:vm.$el

类型:全局API

影响程度:大


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


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


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


相关文章
|
13天前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
13天前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
2月前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
18 1
js之DOM 文档对象模型
|
2月前
|
JavaScript 算法 前端开发
"揭秘虚拟DOM的神奇魔法:从零开始打造高效渲染引擎,颠覆你的DOM操作认知!"
【8月更文挑战第20天】虚拟DOM是一种优化技术,通过在内存中构建DOM树的轻量级副本,减少浏览器重排和重绘,提升性能。本文简要介绍了DOM及其重要性,并深入解释了虚拟DOM的概念。虚拟DOM通过模拟真实DOM结构,在内存中进行数据更新,仅将变动部分同步到实际DOM。文中还提供了一个简易虚拟DOM的实现方案,包括虚拟节点创建、渲染函数及一个基本的diff算法,用于比对新旧虚拟DOM并高效更新实际DOM。通过示例展示了如何构建和渲染一个简单的虚拟DOM。这有助于理解虚拟DOM的基本工作原理和技术细节。
43 4
|
2月前
|
XML JavaScript 测试技术
Web自动化测试框架(基础篇)--HTML页面元素和DOM对象
本文为Web自动化测试入门指南,介绍了HTML页面元素和DOM对象的基础知识,以及如何使用Python中的Selenium WebDriver进行元素定位、操作和等待机制,旨在帮助初学者理解Web自动化测试中的关键概念和操作技巧。
45 1
|
2月前
|
数据采集 JavaScript 数据挖掘
如何使用 PHP Simple HTML DOM Parser 轻松获取网页中的特定数据
本文介绍了使用PHP Simple HTML DOM Parser进行网页数据抓取的方法,尤其适用于从懂车帝二手车网站提取汽车品牌、价格和里程等关键信息。首先,安装并配置所需库,使用代理IP和设置cookie与useragent来模拟用户行为,避免被封。然后,通过编写PHP脚本,利用cURL获取网页内容,解析HTML并提取所需数据,最终将数据保存至CSV文件。文章强调了正确配置代理和用户代理的重要性,并提供了完整的PHP代码示例,以帮助读者理解和应用网页抓取技术。
如何使用 PHP Simple HTML DOM Parser 轻松获取网页中的特定数据
|
2月前
|
JavaScript 前端开发 API
前端开发者的救赎:揭秘JQ对象与DOM元素的神秘转换术
【8月更文挑战第23天】在Web前端开发领域,jQuery(简称JQ)作为一款流行的JavaScript库,极大简化了HTML文档遍历、事件处理、动画及Ajax交互等操作。理解和掌握jQuery对象与DOM元素间的转换至关重要。
31 0
|
2月前
|
JavaScript 前端开发
DOM的概念?获取html元素的方法有哪些?
DOM的概念?获取html元素的方法有哪些?
32 0
|
2月前
|
JavaScript 前端开发
js之DOM 文档对象模型
js之DOM 文档对象模型
|
4月前
|
JavaScript 前端开发
DOM操作有哪些方法可以改变元素的样式?
【6月更文挑战第30天】DOM操作有哪些方法可以改变元素的样式?
26 2