vue更改数组或对象除了$set还可以使用this.$forceUpdate()

2,262 阅读1分钟

最近在做图片上传的时候遇到一个问题,使用element ui 的el-upload上传组件,图片上传成功以后,表单对象绑定的图片没有回显,想到可能是vue对象没有初始化属性问题。

根据官方文档定义:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

好了,找到问题我们就要找处理方法了。官方推荐$set方法

调用方法:this.$set( target, key, value )

target:要更改的数据源(可以是对象或者数组)

key:要更改的具体数据

value :重新赋的值

ok 根据以上方法完美解决,空闲之余又发现有另一种方法this.$forceUpdate()也同样能够处理,官方解释

如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事。

你可能还没有留意到数组或对象的变更检测注意事项,或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。

然而,如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新,那么你可以通过 $forceUpdate 来做这件事。

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