javascript / expert
Snippet
Lebenszyklusverwaltete Direktiven für externe Bibliotheken
Die Integration nicht-reaktiver Bibliotheken (wie Chart.js oder D3) erfordert ein sorgfältiges Lebenszyklusmanagement. Benutzerdefinierte Direktiven bieten eine saubere Brücke zum Initialisieren, Aktualisieren und Zerstören dieser Instanzen genau dann, wenn das Host-DOM-Element in den virtuellen Vue-Baum eintritt oder ihn verlässt.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
const vChart = {mounted(el, binding) {const chartInstance = new ThirdPartyChart(el, binding.value);el._chartInstance = chartInstance;},updated(el, binding) {el._chartInstance.update(binding.value);},beforeUnmount(el) {el._chartInstance.destroy();delete el._chartInstance;}};
vue
Erklärung
1
mounted(el, binding) { ... }
Initialisiert die Drittanbieter-Bibliothek, wenn das Element zum DOM hinzugefügt wird.
2
el._chartInstance = chartInstance;
Hängt die Instanz an das DOM-Element an, um später in anderen Hooks darauf zuzugreifen.
3
updated(el, binding) { ... }
Reagiert auf Änderungen am Wert der Direktive, indem die Update-Methode der Bibliothek aufgerufen wird.
4
beforeUnmount(el) { ... }
Bereinigt Ressourcen, um Speicherlecks zu verhindern, bevor das Element entfernt wird.