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

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

1、强制更新

import { getCurrentInstance } from 'vue';

setup(){

const internalInstance = getCurrentInstance()

// 操作数据后更新视图

internalInstance.ctx.$forceUpdate();

return {

internalInstance

}

}

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

{{data}}

修改数据时

import { ref } from 'vue';

setup(){

const updateKey = ref(0);

// 操作数据后更新视图

updateKey.value += 1;

return {

updateKey

}

}

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

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

Copyright © 2022 篮球世界杯_世界杯亚洲区名额 - cdbnfc.com All Rights Reserved.