javascript / intermediate
Snippet
Destrukturierung der Reaktivität mit toRefs
Wenn Sie ein reaktives Objekt in Vue destrukturieren, verlieren die resultierenden Variablen ihre Verbindung zur Reaktivität des ursprünglichen Objekts. Das Hilfsmittel toRefs konvertiert jede Eigenschaft eines reaktiven Objekts in ein entsprechendes Ref, sodass Sie destrukturieren können, während eine Live-Verbindung zum ursprünglichen Zustand erhalten bleibt.
snippet.js
1
2
3
4
5
6
7
8
9
10
import { reactive, toRefs } from 'vue';const state = reactive({count: 0,user: 'Alex'});// Destructuring normally would lose reactivity.// toRefs converts properties into refs.const { count, user } = toRefs(state);
vue
Erklärung
1
const state = reactive({ ... });
Initialisiert ein tief reaktives Objekt, das den Zustand der Komponente enthält.
2
toRefs(state)
Transformiert die Eigenschaften des reaktiven Objekts in einzelne Ref-Objekte.
3
const { count, user } = ...
Destrukturiert die Refs, damit sie als unabhängige Variablen im Template verwendet werden können.