快捷導(dǎo)航

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

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

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

1、強制更新

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)文章

vite?vue3?規(guī)范化與Git?Hooks詳解
這篇文章主要介紹了vite?vue3?規(guī)范化與Git?Hooks,本文重點討論?git?提交規(guī)范,結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-10-10
element表格變化后自動刷新的兩種方案
本文主要介紹了element表格變化后自動刷新的兩種方案，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
Vue3?pinia管理數(shù)據(jù)的3種方式代碼
在Vue3中Pinia是一個狀態(tài)管理庫,它提供了一種簡單而強大的方式來管理應(yīng)用程序的狀態(tài),這篇文章主要給大家介紹了關(guān)于Vue3?pinia管理數(shù)據(jù)的3種方式,需要的朋友可以參考下
2024-04-04
在vue-cli創(chuàng)建的項目中使用sass操作
這篇文章主要介紹了在vue-cli創(chuàng)建的項目中使用sass操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
Vue3中Composition?API和Options?API的區(qū)別
Vue3的Composition API和Options API是Vue.js框架中的兩種不同的API，本文主要介紹了Vue3中Composition?API和Options?API的區(qū)別，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-06-06
使用VUE實現(xiàn)在table中文字信息超過5個隱藏鼠標(biāo)移到時彈窗顯示全部
這篇文章主要介紹了使用VUE實現(xiàn)在table中文字信息超過5個隱藏，鼠標(biāo)移到時彈窗顯示全部,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-09-09
vue如何獲取自定義元素屬性參數(shù)值的方法
這篇文章主要介紹了vue如何獲取自定義元素屬性參數(shù)值的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue3+ts重復(fù)參數(shù)提取成方法多處調(diào)用以及字段無值時不傳字段給后端問題
在進行API開發(fā)時,優(yōu)化參數(shù)傳遞是一個重要的考量,傳統(tǒng)方法中,即使參數(shù)值為空,也會被包含在請求中發(fā)送給后端,這可能會導(dǎo)致不必要的數(shù)據(jù)處理,而優(yōu)化后的方法則只會傳遞那些實際有值的字段,從而提高數(shù)據(jù)傳輸?shù)挠行院秃蠖颂幚淼男?/div> 2024-10-10
Vue Promise的axios請求封裝詳解
這篇文章主要介紹了Vue Promise的axios請求封裝詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-08-08
Monaco?Editor開發(fā)SQL代碼提示編輯器實例詳解
這篇文章主要為大家介紹了Monaco?Editor開發(fā)SQL編輯器實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2022-08-08