javascript / intermediate
Snippet
Verwaltung reaktiver Elementauswahlen mit nativem JavaScript Set
Die Verwendung der nativen JavaScript-Datenstruktur Set stellt die eindeutige ID-Verfolgung und eine O(1)-Suchleistung für Auswahlzustände sicher. Das Neuzuweisen einer neuen Set-Instanz bei Mutationen gewährleistet eine zuverlässige Reaktivitätsauslösung in Vue-Komponenten.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { ref } from 'vue';export function useSelectionSet() {const selectedIds = ref(new Set());const toggleSelection = (id) => {const next = new Set(selectedIds.value);if (next.has(id)) {next.delete(id);} else {next.add(id);}selectedIds.value = next;};const isSelected = (id) => selectedIds.value.has(id);const clearSelection = () => { selectedIds.value = new Set(); };return { selectedIds, toggleSelection, isSelected, clearSelection };}
vue
Erklärung
1
const selectedIds = ref(new Set());
Kapselt eine standardmäßige ES6-Set-Sammlung in einer reaktiven Vue-Referenz.
2
const next = new Set(selectedIds.value);
Erstellt einen flachen Klon des vorhandenen Sets, um unveränderliche Updates durchzuführen.
3
if (next.has(id)) { next.delete(id); } else { next.add(id); }
Führt eine schnelle Elementprüfung durch und fügt die Kennung bedingt der Sammlung hinzu oder entfernt sie.
4
selectedIds.value = next;
Weist dem Ref-Wert die neue Instanz zu, um Reaktivitätsbenachrichtigungen für abhängige Computed Properties und Watcher sauber auszulösen.