本篇博客是博主记录在项目开发中遇到的
Vue
前端界面UI更新问题,界面更新就是对界面元素的更新。下述4中方法均是Vue
框架本身提供的更新UI界面的API
,按照接口对UI
刷新操作后影响的程度进行升级描述。
详情见官网 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'
这玩意影响最轻,在开发中不容易出效果。
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副作用太大,不到迫不得已不使用。