最近有一個(gè)項(xiàng)目遇到一個(gè)問(wèn)題：是一個(gè)彈窗操作數(shù)據(jù)，當(dāng)彈窗里的數(shù)據(jù)已經(jīng)發(fā)生改變時(shí)，而視圖并沒(méi)有改變，未能得到及時(shí)更新，因此歸納了以下方法來(lái)解決這個(gè)問(wèn)題
1、強(qiáng)制更新
import { getCurrentInstance } from 'vue';
setup(){
const internalInstance = getCurrentInstance()
// 操作數(shù)據(jù)后更新視圖
internalInstance.ctx.$forceUpdate();
return {
internalInstance
}
}
2、在數(shù)據(jù)修改的組件上加上標(biāo)識(shí)符
<div :key="updateKey">{{data}}</div>
修改數(shù)據(jù)時(shí)文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-577681.html
import { ref } from 'vue';
setup(){
const updateKey = ref(0);
// 操作數(shù)據(jù)后更新視圖
updateKey.value += 1;
return {
updateKey
}
}
3、在視圖組件中使用 v-if
修改值之后將組件銷毀，修改后下一次渲染將重新渲染文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-577681.html
到了這里，關(guān)于vue3——解決數(shù)據(jù)更新而視圖未更新問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
