Eine kurze Analyse des Unterschieds zwischen ref und toRef in Vue3

1. ref wird kopiert, die Ansicht wird aktualisiert

Wenn Sie ref verwenden, um einen Eigenschaftswert in einem Objekt in responsive Daten umzuwandeln

Das Ändern der Antwortdaten hat keine Auswirkungen auf die Originaldaten.

Gleichzeitig wird die Ansicht aktualisiert.

Ref bedeutet Kopieren. Das Kopieren hat keine Auswirkungen auf die Originaldaten.

<Vorlage>
 <div>
    <div>
      <div>{{stateObj}}</div>
       <button @click="func1">Schaltfläche</button>
    </div>
 </div>
</Vorlage>
<Skript>
importiere {ref} von 'vue'
Standard exportieren {
  Name: "App",
  aufstellen(){
    let obj={name:"Alter",age:22}
    
    //Eine Eigenschaft im Objekt in responsive Daten umwandeln //anstatt das Objekt in responsive Daten umzuwandeln let stateObj=ref(obj.name)
    Funktion func1(){
      stateObj.value="Zhang San wird zu Li Si";
      //Die Originaldaten haben sich nicht geändert. Originaldaten obj {name: "张三", age: 22}
      console.log("Originaldatenobjekt", Objekt)

      //Die Antwortdaten haben sich geändert/**
      Reaktionsfähiges stateObj RefImpl {
          _rawValue: "Zhang San wird zu Li Si", _shallow: false,
          __v_isRef: true, _value: „Zhang San wird zu Li Si“
      }
      **/
      // Wird zu einem Ref-Objekt console.log("responsive stateObj",stateObj)

    }

    returniere {stateObj,func1}
},
}
</Skript>

2. toRef ist eine Referenz, die Ansicht wird nicht aktualisiert

Wenn toRef verwendet wird, um die Eigenschaften eines Objekts in responsive Daten umzuwandeln

Wenn wir die Antwortdaten ändern, wirkt sich dies auf die Originaldaten aus

Wenn die Daten über toRef erstellt werden, lösen die Daten die Ansicht nicht aus, nachdem der Wert geändert wurde

toRef ist eine Referenz; sie verweist auf die Eigenschaft im vorherigen Objekt

Wenn Sie es ändern, wirkt sich dies auf den Wert der Originaldaten aus.

<Vorlage>
 <div>
    <div>
      <div>{{Staat}}</div>
       <button @click="func1">Schaltfläche</button>
    </div>
 </div>
</Vorlage>
<Skript>
importiere { toRef } von 'vue'
Standard exportieren {
  Name: "App",
  aufstellen(){
    let obj={name:"Alter",age:22}
    //Konvertieren Sie einen Eigenschaftsnamen im Objekt in responsive Daten. //Anstatt das Objekt in responsive Daten umzuwandeln, let state=toRef(obj, 'name');
    console.log('toRef',Status)
    Funktion func1(){
      state.value="Ich bin Li Si";
      konsole.log('obj',obj)
      console.log('Status',Status)
    }
    returniere {Zustand,Funktion1}
  },
}
</Skript>

3. Fazit

Ref-Kopie, Änderung der Antwortdaten. Vorherige Daten werden nicht beeinflusst, die Schnittstelle wird sich ändern.

toRef-Referenz. Das Ändern der Antwortdaten wirkt sich auf die vorherigen Daten aus und die Schnittstelle wird nicht aktualisiert.

Anwendungsfälle für toRef

Wenn Sie Antwortdaten mit Originaldaten verknüpfen möchten.

Und nachdem Sie die Antwortdaten aktualisiert haben, möchten Sie nicht, dass die Ansicht aktualisiert wird. Dann können Sie toRef verwenden.

Zusammenfassung:

Der Unterschied zwischen ref und toRef

(1) Das Wesen von ref besteht im Kopieren, und das Ändern der Antwortdaten wirkt sich nicht auf die Originaldaten aus. Das Wesen von toRef besteht in einer Referenzbeziehung, und das Ändern der Antwortdaten wirkt sich auf die Originaldaten aus

(2) Wenn sich die Ref-Daten ändern, wird die Schnittstelle automatisch aktualisiert; wenn sich die ToRef-Daten ändern, wird die Schnittstelle nicht automatisch aktualisiert

(3) Der an toRef übergebene Verweis ist unterschiedlich. toRef empfängt zwei Parameter, der erste Parameter ist welches Objekt und der zweite Parameter ist welches Attribut des Objekts

Zusammenfassen

Dies ist das Ende dieses Artikels über den Unterschied zwischen ref und toRef in Vue3. Weitere Informationen zum Unterschied zwischen Vue3 ref und toRef finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!