Ein kurzer Vortrag über berechnete Eigenschaften und das Abhören von Eigenschaften in Vue

 berechnet: {
     "Berechneter Eigenschaftsname" () {
         "Wert" zurückgeben
     }
 }

<Vorlage>
  <div>
    <p>{{ Zahl }}</p>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Daten(){
    zurückkehren {
      eine: 10,
      b: 20
    }
  },
  // Berechnete Eigenschaften:
  // Szenario: Der Wert einer Variablen muss mithilfe einer anderen Variablen berechnet werden/*
    Grammatik:
    berechnet: {
      BerechneterEigenschaftsname() {
        Rückgabewert}
    }
  */
 // Hinweis: Sowohl berechnete als auch Datenattribute sind Variablen – sie können nicht denselben Namen haben // Hinweis 2: Wenn sich eine Variable innerhalb einer Funktion ändert, wird das Ergebnis automatisch neu berechnet und berechnet zurückgegeben: {
    Zahl(){
      gib dies.a + dies.b zurück
    }
  }
}
</Skript>

<Stil>

</Stil>

 erhalten(){
                console.log('get wurde aufgerufen')
                // console.log(dies) // das hier ist vm (Vue-Instanz)
                returniere diesen.Vorname + '-' + diesen.Nachname
            },
            

  ...
  berechnet:{
      vollständiger Name:
          //Was ist die Funktion von get? Wenn jemand fullName liest, wird get aufgerufen und der Rückgabewert als Wert von fullName verwendet. //Wann wird get aufgerufen? 1. Wenn fullName zum ersten Mal gelesen wird. 2. Wenn sich die Daten ändern, von denen sie abhängen.
          erhalten(){
              console.log('get wurde aufgerufen')
              // console.log(dies) //Dies ist vm
              returniere diesen.Vorname + '-' + diesen.Nachname
          },
          //Wann wird set aufgerufen? Wenn fullName geändert wird.
          setze(Wert){
              console.log('festlegen',Wert)
              const arr = Wert.split('-')
              dieser.Vorname = arr[0]
              dieser.Nachname = arr[1]
          }
      }
  }
})    

<!-- Beim Binden eines Ereignisses: @xxx="yyy" yyy kann einige einfache Anweisungen schreiben -->
<button @click="isHot = !isHot">Wetter wechseln</button>

      ...
      //Methode 1 schreiben. Übergeben Sie die Watch-Konfiguration, um auf das iHot-Attribut watch:{ zu hören.
          istHeiß:{
              immediate:true, //Lassen Sie den Handler während der Initialisierung aufrufen. //Wann wird der Handler aufgerufen? Wenn sich isHot ändert.
              
              handler(neuerWert,alterWert){
                  console.log('isHot wurde geändert', neuerWert, alterWert)
              }
          }
      }
  })
  
  
  // Methode 2. Überwachung über vm.$watch('isHot',{
   immediate:true, //Lassen Sie den Handler während der Initialisierung aufrufen, der Standardwert ist false
   //Wann wird der Handler aufgerufen? Wenn sich isHot ändert.
   handler(newValue,oldValue){ // Es gibt zwei Parameter, einer ist der neue Wert und der andere ist der alte Wert console.log('isHot wurde geändert',newValue,oldValue)
   }
})

Daten:{
	istHeiß:wahr,
	Zahlen:
		eine:1,
		b:1
	}
},
betrachten:{
	// Überwachen Sie die Änderung eines bestimmten Attributs in einer mehrstufigen Struktur (beim ursprünglichen Schreibvorgang müssen Anführungszeichen hinzugefügt werden, und die Abkürzung kann weggelassen werden, in diesem Fall muss sie jedoch hinzugefügt werden, da sonst ein Fehler gemeldet wird).
	/* 'zahlen.a': {
		handler(){
			console.log('a wurde geändert')
		}
	} */
	//Überwachen Sie die Änderungen aller Attribute in der mehrstufigen Strukturnummern:{
		deep:true, // Wenn dies nicht aktiviert ist, dann wird überwacht, ob sich die Adresse der Nummer geändert hat handler(){
			console.log('Zahlen geändert')
		}
	}
}

betrachten:{
	istHeiß(neuerWert,alterWert){
		console.log('isHot wurde geändert',neuerWert,alterWert,dieser)
	}
}

/* vm.$watch('isHot',function (neuerWert,alterWert) {
	console.log('isHot wurde geändert',neuerWert,alterWert,dieser)
}) */

betrachten:{
	Vorname(Wert){
		setzeTimeout(()=>{
			console.log(this) //vue-Instanzobjekt, wenn eine normale Funktion verwendet wird, gibt es Window zurück
			dieser.vollständigerName = Wert + '-' + dieser.nachsterName
		},1000);
	},
	Nachname(Wert){
		dieser.vollständigerName = dieser.vorname + '-' + val
	}
}