最近有一个项目遇到一个问题:是一个弹窗操作数据,当弹窗里的数据已经发生改变时,而视图并没有改变,未能得到及时更新,因此归纳了以下方法来解决这个问题

1、强制更新

import { getCurrentInstance } from 'vue';
setup(){
	const internalInstance = getCurrentInstance()

	// 操作数据后更新视图
	internalInstance.ctx.$forceUpdate();
	return {
		internalInstance
	}	
}

2、在数据修改的组件上加上标识符

<div :key="updateKey">{{data}}</div>

修改数据时

import { ref } from 'vue';
setup(){
	const updateKey = ref(0);
	
	// 操作数据后更新视图
	updateKey.value += 1;
	return {
		updateKey
	}
}

3、在视图组件中使用 v-if

修改值之后将组件销毁,修改后下一次渲染将重新渲染

Logo

DAMO开发者矩阵,由阿里巴巴达摩院和中国互联网协会联合发起,致力于探讨最前沿的技术趋势与应用成果,搭建高质量的交流与分享平台,推动技术创新与产业应用链接,围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐