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

本篇博客是博主记录在项目开发中遇到的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'
1

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

2、下次钩子

API：nextTick()
类型：全局API
影响程度：小

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

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

3、对象引用

API：vm.$el
类型：全局API
影响程度：中

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

实例：

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

4、强制刷新

API：vm.$el
类型：全局API
影响程度：大

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

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

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