Die vollständige Verwendung von Setup, Ref und Reactive in der Vue3-Kombinations-API

<Vorlage>
 <div>{{ AnzahlAnzahl}}</div>
 <button @click="handerFunc">Schaltfläche</button>
</Vorlage>
<Skript>
importiere {ref} von 'vue'
Standard exportieren {
  Name: "App",
  aufstellen() {
    // Dieser Satz bedeutet, dass eine Variable count definiert ist. Der Anfangswert dieser Variable ist 100
    Lassen Sie countNum = ref(100);

    // Wenn Sie in der kombinierten API eine Methode definieren möchten, müssen Sie sie nicht in Methoden definieren. Definieren Sie es einfach direkt als Funktion handerFunc(){
      // console.log(countNum); //countNum ist ein Objekt countNum.value += 10;
    }
    //In der kombinierten API definierte Methoden oder Variablen. Wenn es außerhalb benötigt wird, muss es durch return {aaa,func} return {countNum,handerFunc} verfügbar gemacht werden.
  }
}
</Skript> 

<Vorlage>
 <div>
   <ul>
     <li v-for="Artikel in satte.arr" :key="Artikel-ID">
       {{item.name }}
     </li>
   </ul>

 </div>
</Vorlage>
<Skript>
importiere {reaktiv} von 'vue'
Standard exportieren {
  Name: "App",
  aufstellen(){
    console.log("setUp wird automatisch ausgeführt")
    // Hinweise zur Ref-Funktion:
    // Die Ref-Funktion kann nur einfache Datentypen überwachen, keine komplexen Datentypen (Arrays, Objekte)
    // Die reaktive Methode enthält ein Objekt let satte=reactive({
       arr:[
         {name:"Si Teng",id:'0011'},
         {name:"Unter der Haut",id:'0011'},
         {name:"Ein hundertjähriges Versprechen",id:'0012'},
         {name:"Neues Produkt",id:'0013'},
       ]
    })
    Rückkehr { f }
  },
}
</Skript>

<Vorlage>
 <div>
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name }}
     </li>
   </ul>

 </div>
</Vorlage>
<Skript>
importiere {reaktiv} von 'vue'
Standard exportieren {
  Name: "App",
  aufstellen(){
    lass satte = reaktiv({
       arr:[
         {name:"Si Teng",id:'0011'},
         {name:"Unter der Haut",id:'0011'},
         {name:"Ein hundertjähriges Versprechen",id:'0012'},
         {name:"Neues Produkt",id:'0013'},
       ]
    })
    // Das angeklickte Element löschen Funktion del(index){
      für (lass i = 0; i < satte.arr.length; i++) {
        wenn(index==i){
          satte.arr.splice(i,1)
        }
      }
    }
    return { satte, del}
  },
}
</Skript> 

<Vorlage>
 <div>
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name }}
     </li>
   </ul>

 </div>
</Vorlage>
<Skript>
importiere {reaktiv} von 'vue'
Standard exportieren {
  Name: "App",
  aufstellen(){
    // Die Methode onlyDelLuoJi() enthält ein Array und eine Methode; ähnlich der Dekonstruktion let {satte,del }=onlyDelLuoJi();
    
    // Der Außenwelt zugänglich machen return {sate,del}
  },
}

Funktion nurDelLuoJi(){
   let satte = reaktiv({
       arr:[
         {name:"Si Teng",id:'0011'},
         {name:"Unter der Haut",id:'0011'},
         {name:"Ein hundertjähriges Versprechen",id:'0012'},
         {name:"Neues Produkt",id:'0013'},
       ]
    })
    // Das angeklickte Element löschen Funktion del(index){
      für (lass i = 0; i < satte.arr.length; i++) {
        wenn(index==i){
          satte.arr.splice(i,1)
        }
      }
    }
    //Daten satte und Methode del verfügbar machen return { satte,del }
}
</Skript>

<Vorlage>
 <div>
   <div>
      <Eingabetyp="Text" v-Modell="addobj.watchTv.name">
      <button @click="addHander">Hinzufügen</button>
   </div>
   
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name }}
     </li>
   </ul>

 </div>
</Vorlage>
<Skript>
importiere {reaktiv} von 'vue'
Standard exportieren {
  Name: "App",
  aufstellen(){
    // Die Methode onlyDelLuoJi() enthält ein Array und eine Methode; ähnlich der Dekonstruktion let {satte,del }=onlyDelLuoJi();
    
    // Der übergebene Parameter „satte“ ist der in der Funktion „onlyDelLuoJi“ bereitgestellte „satte“. Übergeben Sie let { addobj,addHander }=OnlyaddHander(satte);

    // Der Außenwelt zugänglich machen return {sate,del,addobj, addHander}
  },
}

//Funktionsmodul hinzufügen function OnlyaddHander(satte){
  console.log('add initialisieren', satte)
    let addobj = reaktiv({
        Fernsehgerät: {
          Name:"",
          Ausweis:""
        }
     });

    Funktion addHander(){
      // Zurücksetzen und die falsche Methode löschen // satte.arr.push(addobj.watchTv)
        // addobj.watchTv.name = ""; 
        // addobj.watchTv.id = "";
        

          // Richtiger Ansatz let oldobj = Object.assign({}, addobj.watchTv)
        satte.arr.push(altes Objekt)
    }
    return { addobj, addHander }
}

//Funktionsmodul löschen nur FunktionDelLuoJi(){
  console.log('Initialisierung löschen')
   let satte = reaktiv({
       arr:[
         {name:"Si Teng",id:'0011'},
         {name:"Unter der Haut",id:'0011'},
         {name:"Ein hundertjähriges Versprechen",id:'0012'},
         {name:"Neues Produkt",id:'0013'},
       ]
    })
    // Das angeklickte Element löschen Funktion del(index){
      für (lass i = 0; i < satte.arr.length; i++) {
        wenn(index==i){
          satte.arr.splice(i,1)
        }
      }
    }
    //Daten satte und Methode del verfügbar machen return { satte,del }
}
</Skript>

importiere { reaktiv } von "vue"
Funktion OnlyaddHander(satte){
  console.log('add initialisieren', satte)
    let addobj = reaktiv({
        Fernsehgerät: {
          Name:"",
          Ausweis:""
        }
     });
    Funktion addHander(e){
        // Zurücksetzen und die falsche Methode löschen // satte.arr.push(addobj.watchTv)
        // addobj.watchTv.name = ""; 
        // addobj.watchTv.id = "";
        // Richtiger Ansatz let oldobj = Object.assign({}, addobj.watchTv)
        satte.arr.push(altes Objekt)
        e.preventDefault();
    }
    return { addobj, addHander }
}
Standardmäßig exportieren OnlyaddHander

importiere { reaktiv } von "vue"
Funktion nurDelLuoJi() {
  console.log('Initialisierung löschen')
   let satte = reaktiv({
       arr:[
         {name:"Si Teng",id:'0011'},
         {name:"Unter der Haut",id:'0011'},
         {name:"Ein hundertjähriges Versprechen",id:'0012'},
         {name:"Neues Produkt",id:'0013'},
       ]
    })
    // Das angeklickte Element löschen Funktion del(index){
      für (lass i = 0; i < satte.arr.length; i++) {
        wenn(index==i){
          satte.arr.splice(i,1)
        }
      }
    }
    //Daten satte und Methode del verfügbar machen return { satte,del }
}
nur Standard exportierenDelLuoJi

<Vorlage>
 <div>
   <div>
      <Eingabetyp="Text" v-Modell="addobj.watchTv.name">
      <button @click="addHander">Hinzufügen</button>
   </div>
   
   <ul>
     <li v-for="(item,index) in satte.arr" :key="index" @click="del(index)">
       {{item.name }}
     </li>
   </ul>

 </div>
</Vorlage>
<Skript>
importiere nur DelLuoJi aus "./components/del"
importiere OnlyaddHander aus "./components/add"
Standard exportieren {
  Name: "App",
  aufstellen(){
    // Die Methode onlyDelLuoJi() enthält ein Array und eine Methode; ähnlich der Dekonstruktion let {satte,del }=onlyDelLuoJi();
    
    // Parameter übergeben let { addobj,addHander }=OnlyaddHander(satte);

    // Der Außenwelt zugänglich machen return {sate,del,addobj, addHander}
  },
}
</Skript>