当前位置: 首页 > 工具软件 > DOM Update > 使用案例 >

uniapp 强制刷新DOM/强制更新指令:this.$forceUpdate();

丌官寒
2023-12-01

前言

数组和对象更改后视图不刷新

当遇期望DOM一刷新,但其却未刷新怎么办?

比如:在uniapp刷新DOM过程中,你修改了data中的属性。此时uniapp无法感知到属性已经发生变化了,因此,期待的DOM刷新未发生。

我的数据是:

return {
	list: [
		{id: 1, ..., height:1},
		{id: 2, ..., height:1},
	],
}

当我更新height时,期望的DOM刷新未发生。

想知道为什么的,参考这里:Vue中数组和对象更改后视图不刷新的问题
或者通过总结了解一下:数据的改变必须能够触发set方法,否则无法响应数据变化。

解决办法1:this.$forceUpdate();

/*修改属性*/
this.list[0].height = 100;
/*紧接着跟一条强制更新指令*/
this.$forceUpdate();

解决办法2:

/*修改属性*/
this.list[0].height = 100;
/*紧接着,通过重新赋值属性,触发该属性的setter方法*/
this.list= Object.assign({}, this.list);
 类似资料: