vue3——解决数据更新而视图未更新问题

阅读本书更多章节>>>>

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

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

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

阅读本书更多章节>>>>

本文链接：https://www.kjpai.cn/xuetang/2024-04-19/160222.html，文章来源：网络cs，作者：焦糖，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！