【千方百计】更改绑定的数据对象数值后,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副作用太大,不到迫不得已不使用。


相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
1月前
|
JavaScript 前端开发 开发者
判断哪些数据的变化需要触发虚拟 DOM 的更新
判断哪些数据的变化需要触发虚拟 DOM 的更新,需要依据框架的响应式原理、组件的状态管理以及各种用户交互和异步操作等多方面因素。开发者需要深入理解所使用框架的工作机制,合理地组织和管理数据,以确保虚拟 DOM 的更新是高效且必要的。
25 2
|
1月前
|
JavaScript 前端开发 索引
js中DOM的基础方法
【10月更文挑战第31天】这些DOM基础方法是操作网页文档结构和实现交互效果的重要工具,通过它们可以动态地改变页面的内容、样式和行为,为用户提供丰富的交互体验。
|
3月前
|
JavaScript 前端开发 容器
用HTML DOM实现有条件地渲染网页元素(上)
用HTML DOM实现有条件地渲染网页元素(上)
|
3月前
|
存储 JavaScript 前端开发
用HTML DOM实现有条件地渲染网页元素(下)
用HTML DOM实现有条件地渲染网页元素(下)
|
27天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
40 5
|
2月前
|
缓存 编解码 JavaScript
DOM 和 BOM 在项目中应用时的性能优化方法
【10月更文挑战第19天】总之,优化 DOM 和 BOM 的性能需要综合考虑多个方面,通过合理的设计和技术手段,提升项目的运行效率和用户体验。在实际开发中,要不断地进行性能优化实践,以适应不断变化的需求和技术发展。
|
2月前
|
XML 编解码 JavaScript
DOM(文档对象模型)和 BOM(浏览器对象模型)
【10月更文挑战第19天】在前端开发中,理解 DOM(文档对象模型)和 BOM(浏览器对象模型)是至关重要的。它们是 Web 开发的基础,为我们提供了与网页文档和浏览器进行交互的能力。
|
1月前
|
JavaScript 前端开发 API
|
2月前
|
JavaScript 前端开发
DOM的概念?获取html元素的方法有哪些?
DOM的概念?获取html元素的方法有哪些?
36 0