Detaillierte Analyse des Unterschieds zwischen Ref und Reactive in Vue3.0

<!-- Vorlagensyntax> 
<Vorlage>
   <div>{{Staat}}</div>
</Vorlage> 
//js-Skript-Setup(){
     lass Zustand = ref(10) 
     Zustandswert = 11
     returniere {Status}
}

<!-- Vorlagensyntax> 
<Vorlage>
   <div>{{bundesstaat.name}}</div>
</Vorlage> 
//js-Skript-Setup(){
     lass Zustand = reaktiv({name:'aaa'}}) 
     Staat.Name = "Zhangsan"
     returniere {Status}
}

 var Zustand = flachReaktiv({
    ein:'ein',
    gf:{
       b:'b',
       F:{
          c:'c',
          s:{d:'d'}
       }
    }
 })
 Zustand.a = "1"
 //Das Ändern der ersten Datenebene führt dazu, dass die Seite neu gerendert wird //Status => Proxy {a:"a",gf:{...}}
//Wenn Sie die erste Ebene nicht ändern und nur andere Daten ändern, wird die Seite nicht erneut gerendert, z. B. state.gf.b = 2

var Zustand = flachRef({
   ein:'ein',
    gf:{
       b:'b',
       F:{
          c:'c',
          s:{d:'d'}
       }
    }
})
Zustandswert.a = 1
/*
Es kann nicht erneut gerendert werden. Das Prinzip von ShallowRef wird auch durch ShallowReactive({value:{}}) erstellt. Sie müssen den Wert ändern, um erneut zu rendern*/
Zustand.Wert = {
    eine:'1',
    gf:{
       b:'2',
       F:{
          c:'3',
          s:{d:'d'}
       }
    }
}

var Zustand = flachRef({
   ein:'ein',
    gf:{
       b:'b',
       F:{
          c:'c',
          s:{d:'d'}
       }
    }
})
Zustand.Wert.gf.fsd = 4
triggerRef(Zustand)

var obj = {name:'test'}
var Status = reaktiv(Objekt)
var obj2 = toRaw(Status)
obj2.name = 'zs' // bewirkt nicht, dass die Seite gerendert wird----
//Wenn es mit ref erstellt wird, dann holen Sie sich den Wert var obj = {name:'test'}
var Status = ref(Objekt)
var obj2 = toRaw(Zustand.Wert)

var obj = {name:'test'}
obj = markRaw(obj)
var Status = reaktiv(Objekt)
state.name = 'zs' // Datenseite kann nicht geändert werden und wird nicht geändert

var obj = {name:'test'}
var Status = ref(Objektname)
state.name = 'zs' //Zu diesem Zeitpunkt ändert sich der Name-Attributwert von obj nicht und die Benutzeroberfläche wird automatisch aktualisiert///
var obj = {name:'test'}
var state = toRef(obj,'name') //Es kann nur ein Attributwert festgelegt werden state.name = 'zs' //Der Name-Attributwert in obj ändert sich, aber die Benutzeroberfläche wird nicht aktualisiert

var obj = {name:'test',age:16}
var Status = toRefs(Objekt)
state.name.value = 'zs' //Der Eigenschaftswert des Objektnamens ändert sich ebenfalls, aber die Benutzeroberfläche wird nicht aktualisiert state.age.value = 18 //Der Eigenschaftswert des Objektalters ändert sich ebenfalls, aber die Benutzeroberfläche wird nicht aktualisiert

Funktion myRef(Wert){
   /*
    Die Funktion customRef gibt ein Objekt mit zwei Methoden zurück: get/set. Auf die Methode get kann zugegriffen werden, wenn das erstellte Objekt Daten abruft, und die Methode set wird ausgelöst, wenn das erstellte Objekt den Wert ändert. Die Funktion customRef hat zwei Parameter: track/trigger. Der Parameter track bedeutet „Verfolgung“. Er wird in der Methode get aufgerufen, um Datenänderungen jederzeit zu verfolgen. Der Trigger-Parameter wird verwendet, um die Antwort auszulösen. Die Set-Methode kann aufgerufen werden, um die UI-Schnittstelle zu aktualisieren*/
    returniere customRef((Spur,Trigger)=>{
       zurückkehren {
          erhalten(){
             track()//Rückgabewert der Tracking-Daten     
          },
          setze(neuerWert){
             Wert = neuerWert
             trigger()//UI-Schnittstelle aktualisieren}
       }
    })

}

aufstellen(){
   var Alter = myRef(18)
   Alter.Wert = 20
}

<Vorlage>
   <div ref="box"></div>

</Vorlage>
importiere {ref,onMounted} von 'vue'
/*
 Die Setup-Methode wird zwischen beforeCreate und created im Lebenszyklus aufgerufen*/
<Skript>
   aufstellen(){
      var box = ref(null)
      beim Montieren(()=>{
         Konsole.log('onMounted',Box.Wert)
      })
      Konsole.log(Box.Wert)
      Rückgabe {box}

   }

</Skript>