vue3 – Behebt das Problem der Datenaktualisierung, aber die Ansicht wird nicht aktualisiert

Kürzlich ist bei einem Projekt ein Problem aufgetreten: Es handelte sich um ein Popup-Fenster mit Betriebsdaten. Wenn sich die Daten im Popup-Fenster geändert hatten, hatte sich die Ansicht nicht geändert und konnte nicht rechtzeitig aktualisiert werden. Daher wurden die folgenden Methoden zusammengefasst um dieses Problem zu lösen.

1. Erzwungenes Update

import {
    
     getCurrentInstance } from 'vue';
setup(){
    
    
	const internalInstance = getCurrentInstance()

	// 操作数据后更新视图
	internalInstance.ctx.$forceUpdate();
	return {
    
    
		internalInstance
	}	
}

2. Fügen Sie der Komponente, in der die Daten geändert werden, eine Kennung hinzu

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

Beim Ändern von Daten

import {
    
     ref } from 'vue';
setup(){
    
    
	const updateKey = ref(0);
	
	// 操作数据后更新视图
	updateKey.value += 1;
	return {
    
    
		updateKey
	}
}

3. Verwenden Sie v-if in Ansichtskomponenten

Nach dem Ändern des Werts wird die Komponente zerstört und beim nächsten Rendering nach der Änderung erneut gerendert.