Eine kurze Diskussion zur Logikextraktion und Feldanzeige von Vue3 in Projekten

Standard exportieren {
  aufstellen () {
    let {queryDo,addDo,delDO,EditDo}=allFun();
    queryDo(); //Die Abfrageschnittstelle wird aufgerufen}
}

// Dies ist die Logik des Bereichs A der Seitenfunktion allFun(){
  console.log('Ich bin die direkte Anweisung in der allFun-Funktion und werde ausgeführt.')
  Funktion queryDo(){
    console.log('Ich frage die Schnittstelle ab und rufe die Backend-Daten auf')
  }
  Funktion addDo(){
    console.log('Ich bin neu')
  }
  Funktion delDO(){
    console.log('Ich habe gelöscht')
  }
  Funktion EditDo(){
    console.log('Ich bin die Editor-Schnittstelle')
  }
  zurückgeben {queryDo,addDo,delDO,EditDo}
}
</Skript>

<Skript>
Standard exportieren {
  aufstellen () {
    // Die hier verwendete Struktur ist Bereich A let {queryDo,addDo,delDO,EditDo}=aAreaAllFun();

    // Bereich B let {querHander}=bAreaAllFun();

    return {queryDo,addDo,delDO,EditDo,querHander}
  }
}

// Dies ist die Logik eines bestimmten Bereichs auf der Bereichsseite A Funktion aAreaAllFun(){
  Funktion queryDo(){
    console.log('Ich bin die Abfrageschnittstelle von Bereich A')
  }
  Funktion addDo(){
    console.log('Ich bin neu')
  }
  Funktion delDO(){
    console.log('Ich habe gelöscht')
  }
  Funktion EditDo(){
    console.log('Ich bin die Editor-Schnittstelle')
  }
  zurückgeben {queryDo,addDo,delDO,EditDo}
}

// Dies ist die Geschäftslogik von Bereich B Funktion bAreaAllFun(){
  // Rufen Sie die Abfrageschnittstelle von Bereich A direkt auf aAreaAllFun().queryDo();

  Funktion querHander(){
    console.log("Abfrageschnittstelle von Bereich B")
  }
 
  return {querHander}
}
</Skript>

<Skript>
Standard exportieren {
  aufstellen () {
     // Dies ist die Logik eines bestimmten Bereichs auf der Bereichsseite A let {addDo,delDO,EditDo}=aAreaAllFun()
    
    // Dies ist die Logik eines bestimmten Bereichs auf der Seite „Bereich B“ let {querHander}=bAreaAllFun();

    return {queryDo,addDo,delDO,EditDo,querHander}
  }
}

// Öffentliche Abfrageschnittstelle. Viele Bereiche können die Funktion queryDo(){ verwenden.
  console.log('Ich bin die Abfrageschnittstelle der Region, ich wurde herausgezogen')
}

// Dies ist die Logik eines bestimmten Bereichs auf der Bereichsseite A Funktion aAreaAllFun(){
 
  Funktion addDo(){
    console.log('Ich bin neu')
  }
  Funktion delDO(){
    console.log('Ich habe gelöscht')
  }
  Funktion EditDo(){
    console.log('Ich bin die Editor-Schnittstelle')
  }
  zurückgeben {addDo,delDO,EditDo}
}

// Dies ist die Geschäftslogik von Bereich B Funktion bAreaAllFun(){
  // Rufen Sie die öffentliche Abfrageschnittstelle direkt auf queryDo();

  Funktion querHander(){
    console.log("Abfrageschnittstelle von Bereich B")
  }
 
  return {querHander}
}
</Skript>

<Vorlage>
  <div>
    <h2>Name: {{ areaData.info.name}}</h2>
    <h2>Alter: {{ areaData.info.age}}</h2>
    <h2>Geschlecht: {{ areaData.info.sex}}</h2>
  </div>
</Vorlage>
<Skript>
importiere { reaktiv } von '@vue/reactivity';
Standard exportieren {
  aufstellen () {
 
    let {addDo,areaData}=aAreaAllFun();

    gibt {addDo,areaData} zurück
  }
}
// Dies ist die Logik eines bestimmten Bereichs auf der Bereichsseite A Funktion aAreaAllFun(){
  let areaData = reaktiv({
    Info:
      Name: 'Zhang San',
      Alter:20,
      Geschlecht: männlich
    }
  })
  Funktion addDo(){
    console.log('Ich bin neu')
  }
  gibt {addDo,areaData} zurück
}
</Skript>

<Vorlage>
  <div>
    <h2>Name: {{ name}}</h2>
    <h2>Alter: {{ age}}</h2>
    <h2>Geschlecht: {{ sex}}</h2>
  </div>

  <button @click="ChangeCont">Wert ändern</button>
</Vorlage>
<Skript>
importiere { reaktiv, toRefs } von „vue“;
Standard exportieren {
  aufstellen () {
    let {name,alter,geschlecht,ChangeCont }=aAreaAllFun();
    returniere {Name, Alter, Geschlecht, ChangeCont}
  }
}
// Dies ist die Logik eines bestimmten Bereichs auf der Bereichsseite A Funktion aAreaAllFun(){
  let areaData = reaktiv({
    Info:
      Name: 'Zhang San',
      Alter:20,
      Geschlecht: männlich
    }
  })

  Funktion ChangeCont(){
    // Wenn Sie den Wert auf diese Weise ändern, reagiert die Ansicht nicht. [Fehler]
    //areaData.info={
    // Name: 'Li Si',
    //Alter:21,
    // Geschlecht: 'männlich'
    // }

    // Dies ist OK, um die Ansicht korrekt zu aktualisieren [ok]
    areaData.info.name='123'
    areaData.info.age=12
    areaData.info.sex='männlich'
  }

  // toRefs können ein responsives Objekt in ein normales Objekt umwandeln.
  // Jeder Wert dieses gemeinsamen Objekts ist ein Verweis.
  // Da es ein Verweis wird, müssen wir den Wert verwenden.
  zurück {ChangeCont,...toRefs(areaData.info)}
}
</Skript>