Vue Grundlagen Listener Detaillierte Erklärung

Daten() {
    zurückkehren {
        Info:
            Name: "cgj"
        }
    }
}
betrachten:
    Info:
        handler(neuerWert, alterWert) {
            console.log(neuerWert, alterWert)    
        }
        tief: wahr,
        sofort: wahr,
    }
}

'info.name': Funktion(neuerWert, alterWert) {
    console.log(neuerWert, alterWert)
}

const app = erstelleApp({
  Daten() {
    zurückkehren {
      ein: 1,
      b: 2,
      C: {
        T: 4
      },
      e: 5,
      f: 6
    }
  },
  betrachten:
    // Hören Sie auf die Eigenschaft der obersten Ebene
    a(Wert, alterWert) {
      console.log(`neu: ${val}, alt: ${oldVal}`)
    },
    // String-Methodenname b: 'someMethod',
    // Dieser Rückruf wird aufgerufen, wenn sich die Eigenschaft eines überwachten Objekts ändert, unabhängig davon, wie tief es verschachtelt ist c: {
      handler(val, alterWert) {
        console.log('c geändert')
      },
      tief: wahr
    },
    // Auf eine einzelne verschachtelte Eigenschaft hören
    'c.d': Funktion (Wert, alterWert) {
      // etwas tun
    },
    // Dieser Rückruf wird sofort aufgerufen, nachdem das Abhören beginnt e: {
      handler(val, alterWert) {
        console.log('e geändert')
      },
      sofort: wahr
    },
    // Sie können ein Array von Rückrufen übergeben und diese werden nacheinander aufgerufen f: [
      'Handle1',
      Funktion handle2(val, alterWert) {
        console.log('handle2 ausgelöst')
      },
      {
        Handler: Funktion handle3(val, oldVal) {
          console.log('handle3 ausgelöst')
        }
        /* … */
      }
    ]
  },
  Methoden: {
    irgendeineMethode() {
      console.log('b geändert')
    },
    handle1() {
      console.log('Handle 1 ausgelöst')
    }
  }
})
const vm = app.mount('#app')
vm.a = 3 // => neu: 3, alt: 1

betrachten:
    "Der Name der Eigenschaft, die überwacht wird" (newVal, oldVal){
    }
}

<Vorlage>
  <div>
    <Eingabetyp="Text" v-Modell="Name">
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Daten(){
    zurückkehren {
      Name: ""
    }
  },
  // Ziel: Auf Änderungen im Namenswert achten/*
  Grammatik:
    betrachten:
      Variablenname(neuerWert, alterWert){
        //Der Variablenname wird bei der Wertänderung hier automatisch ausgelöst}
    }
  */
  betrachten:
    // newVal: aktueller Wert // oldVal: vorheriger Wert name(newVal, oldVal){
      console.log(neuerWert, alterWert);
    }
  }
}
</Skript>
<Stil>
</Stil>

betrachten:
    "Der Name der Eigenschaft, die überwacht wird" (newVal, oldVal){
    }
}

<Vorlage>
  <div>
    <input type="text" v-model="benutzer.name">
    <input type="text" v-model="Benutzer.Alter">
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Daten(){
    zurückkehren {
      Benutzer: {
        Name: "",
        Alter: 0
      }
    }
  },
  // Ziel: Abhörendes Objekt/*
  Grammatik:
    betrachten:
      Variablenname(neuerWert, alterWert){
        //Der Variablenname wird bei der Wertänderung hier automatisch ausgelöst},
      Variablenname: {
        handler(neuerWert, alterWert){
        },
        deep: true, // tiefes Zuhören (Wertänderungen in der inneren Ebene des Objekts)
        immediate: true // Sofort hören (Handler wird einmal ausgeführt, wenn die Webseite geöffnet wird)
      }
    }
  */
  betrachten:
    Benutzer: {
      handler(neuerWert, alterWert){
        //Objekt in userconsole.log(newVal, oldVal);
      },
      tief: wahr,
      sofort: wahr
    }
  }
}
</Skript>
<Stil>
</Stil>