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

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

class BankAccount {

Definiert ein objektorientiertes Domänenmodell zur Durchsetzung von Invarianten und Kapselung.

#balance = 0;

Deklariert ein echtes privates ECMAScript-Klassenfeld, auf das von außen nicht zugegriffen werden kann.

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.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Fortgeschrittene →

Kapselung von Geschäftslogik mit Klassenmodellen in oberflächlich reaktivem Zustand

Verwandt