快捷導(dǎo)航

vue3數(shù)據(jù)更新而視圖未更新問題解決

更新時間：2023年10月08日 08:44:48 作者：哎喲喂_!

本文主要介紹了vue3?解決數(shù)據(jù)更新而視圖未更新問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1、強(qiáng)制更新

import { getCurrentInstance } from 'vue';
setup(){
	const internalInstance = getCurrentInstance()
	// 操作數(shù)據(jù)后更新視圖
	internalInstance.ctx.$forceUpdate();
	return {
		internalInstance
	}	
}

2、在數(shù)據(jù)修改的組件上加上標(biāo)識符

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

修改數(shù)據(jù)時

import { ref } from 'vue';
setup(){
	const updateKey = ref(0);
	// 操作數(shù)據(jù)后更新視圖
	updateKey.value += 1;
	return {
		updateKey
	}
}

3、在視圖組件中使用 v-if

修改值之后將組件銷毀，修改后下一次渲染將重新渲染

到此這篇關(guān)于vue3數(shù)據(jù)更新而視圖未更新問題解決的文章就介紹到這了,更多相關(guān)vue3視圖未更新內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue3中的路由使用解讀
本文總結(jié)了Vue3中路由相關(guān)的知識,包括路由的理解、路由的引入與創(chuàng)建、非編程式路由導(dǎo)航和編程式路由導(dǎo)航
2025-10-10
vue使用WebSocket模擬實(shí)現(xiàn)聊天功能
這篇文章主要介紹了vue使用WebSocket模擬實(shí)現(xiàn)聊天功能,通過創(chuàng)建node服務(wù)和server.js文件實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2021-08-08
如何使用Gitee Pages服務(wù) 搭建Vue項(xiàng)目
這篇文章主要介紹了如何使用Gitee Pages服務(wù) 搭建Vue項(xiàng)目，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-10-10
在vue3.0中如何配置代理
這篇文章主要介紹了在vue3.0中如何配置代理問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue監(jiān)視數(shù)據(jù)的原理詳解
這篇文章主要為大家詳細(xì)介紹了Vue監(jiān)視數(shù)據(jù)的原理，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-02-02
淺談VUE防抖與節(jié)流的最佳解決方案(函數(shù)式組件)
這篇文章主要介紹了淺談VUE防抖與節(jié)流的最佳解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue前端導(dǎo)出多級表頭的excel表的示例代碼
本文主要介紹了vue前端導(dǎo)出多級表頭的excel表的示例代碼,可以使用xlsx庫來創(chuàng)建Excel文件,下面就來具體介紹一下,感興趣的可以了解一下
2024-06-06
Vue+ElementUI實(shí)現(xiàn)表單動態(tài)渲染、可視化配置的方法
這篇文章主要介紹了Vue+ElementUI實(shí)現(xiàn)表單動態(tài)渲染、可視化配置的方法,需要的朋友可以參考下
2018-03-03
Vue3中使用Element?Plus時el-icon無法顯示的問題解決
我們的Vue前端一般都是用的ElementUI,其中按鈕可能用到的比較多,官方里面有自帶的一些默認(rèn)圖標(biāo),下面這篇文章主要給大家介紹了關(guān)于Vue3中使用Element?Plus時el-icon無法顯示的問題解決,需要的朋友可以參考下
2022-03-03
vue.js?Table?組件自定義列寬實(shí)現(xiàn)核心方法
這篇文章主要介紹了vue.js?Table?組件自定義列寬實(shí)現(xiàn)核心方法,文圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下
2022-07-07