Beobachten Sie Modelleigenschaften mit Vue 3 und Typescript

Question

Ich versuche, die Eigenschaften meines Typescript-Modells zu überwachen und es funktioniert, aber es wird eine Warnung in der Konsole angezeigt und ich kann nicht finden, wie ich es entfernen kann.

Dies ist mein Typescript-Modell:

import { watch, ref, Ref, reactive } from 'vue'

Exportieren Sie die Standardklasse Resa {
  öffentliche ID: Zahl = 0
  public deferred_invoicing: Ref<Boolean>

  Konstruktor(Eigenschaften?: Objekt) {
    watch(this.deferred_invoicing, (newValue, oldValue) => {
      console.log(newValue)
    }
  }
}

Die Überwachung funktioniert einwandfrei, aber ich habe diese Warnung in der Konsole[Vue-Warnung]: Ungültige Überwachungsquelle: falsch Eine Überwachungsquelle kann nur eine Getter-/Effektfunktion, eine Referenz oder ein reaktives Objekt sein. oder ein Array dieser Typen.

Habe ich etwas falsch gemacht?

Ich habe versucht, die Zeichenfolge 'deferred_invoicing' anstelle von this.deferred_invoicing

zu verwenden.

Answer 1

您的类实例在某处被设置为Reactive，使其deferred_invoicing属性无法引用

使用

watch(toRaw(this).deferred_invoicing, (newValue, oldValue) => {
      console.log(newValue)
    }