javascript / intermediate
Snippet
Kapselung von Geschäftslogik mit Klassenmodellen in oberflächlich reaktivem Zustand
Tiefe Reaktivitäts-Proxies in Vue können Klasseninstanzen stören, die private Felder (`#field`) oder strenge Prototypenvererbung verwenden. Durch den Einsatz von `shallowReactive` können Entwickler objektorientierte Domänenmodelle mit gekapseltem privatem Zustand sicher einbinden und Änderungen auf oberster Ebene reaktiv verfolgen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import { shallowReactive } from 'vue';class BankAccount {#balance = 0;constructor(initialBalance) {this.#balance = initialBalance;}deposit(amount) {if (amount <= 0) throw new RangeError('Deposit must be positive');this.#balance += amount;}get balance() {return this.#balance;}}const accountState = shallowReactive(new BankAccount(100));
vue
Erklärung
1
class BankAccount {
Definiert ein objektorientiertes Domänenmodell zur Durchsetzung von Invarianten und Kapselung.
2
#balance = 0;
Deklariert ein echtes privates ECMAScript-Klassenfeld, auf das von außen nicht zugegriffen werden kann.
3
const accountState = shallowReactive(new BankAccount(100));
Hüllt die Klasseninstanz in ein flaches reaktives Proxy ein, um Fehler beim Zugriff auf private Felder zu verhindern.