Responsive API für neue Funktionen von Vue3

1, ref

refAkzeptieren Sie einen internen Wert und geben Sie ein responsives und veränderliches Ref-Objekt zurück, das Ref-Objekt hat nur eine .valueEigenschaft , die auf den internen Wert zeigt;

<script setup>
    const refValue = ref('refValue')
    console.log(refValue) // ref 对象
    console.log(refValue.value) // refValue
</script>

• refDie deklarierte Variable, wir können die Variable direkt im htmlCode , aber im js-Code müssen wir .valuedarauf zugreifen, weil die in refdefinierte eine responsive zurückgibt ref 对象und auf das Objekt .über ;
• refEs wird im Allgemeinen verwendet, um grundlegende Datentypen zu deklarieren.Natürlich kann auch ein Objekt deklariert werden, aber es muss .value.xxxüber , und es wird von reactiveder Funktion ;
• refEs kann auch verwendet werden, um DOM zu erhalten, die spezifische Verwendung ist wie folgt;

<script setup>
    const inputRef = ref(null)
    // setup 是包含了 beforeCreate 和 created，这个阶段还没挂载实例，所以需要在 mounted 中获取
    onMounted(() => {
      if (inputRef && inputRef.value) {
        inputRef.value.focus()
      }
    })
</script>
<template>
	<input type="text" ref="inputRef">
</template>

2, reaktiv

reactivesoll eine ansprechende Kopie eines Objekts zurückgeben, proxydas Objekt ;

<script setup>
    const reactiveObj = { name: 'reactiveValue' }
    const reactiveValue = reactive(reactiveObj)
    console.log(reactiveValue, reactiveValue.name) // proxy 代理对象  reactiveValue
    
    const reactiveRef = ref(0)
    const reactiveRefValue = reactive(reactiveRef)
    reactiveRef.value++
    console.log(reactiveRef.value === reactiveRefValue.value) // true
    reactiveRefValue.value++
    console.log(reactiveRef.value === reactiveRefValue.value) // true
</script>

• reactiveDie deklarierte Variable gibt ein proxyObjekt wir die Variable ändern, ändert sich auch das Zielobjekt entsprechend;
• reactiveEs wird im Allgemeinen verwendet, um komplexe Objekttypen zu deklarieren, und kann nicht verwendet werden, um grundlegende Datentypen zu deklarieren. Wenn ein grundlegender Datentyp deklariert wird, gibt es eine Kopie eines grundlegenden Datentyps zurück, kein proxyObjekt . Das Ändern seines Werts wird einen Fehler melden;
• Wenn der übergebene Wert ein refobject , reactivewerden alle tiefen entpackt, refswährend die Reaktionsfähigkeit der ref beibehalten wird, d. h. reactiveeine Änderung des Werts des entsprechenden refObjekts ändert sich ebenfalls entsprechend;

3, schreibgeschützt

readonlyEin Nur-Lese-Proxy , der ein Objekt akzeptiert (reaktiv oder einfach) refoder das ursprüngliche Objekt zurückgibt Nur-Lese-Proxys sind tief: Alle verschachtelten Eigenschaften, auf die zugegriffen wird, sind ebenfalls schreibgeschützt;

<script setup>
    const readObj = { count: 0 }
    const readRef = ref(0)
    const readReac = reactive({ count: 0 })
    const readRefValue1 = readonly(readObj)
    const readRefValue2 = readonly(readRef)
    const readRefValue3 = readonly(readReac)
    const updateReadOnly = () => {
        readObj.count++
        readRef.value++
        readReac.count++
        // 修改失败并会在控制台发出警告
        readRefValue1.count++
        readRefValue2.value++
        readRefValue3.count++
    }
</script>

4、flachReaktiv

shallowReactiveErstellt einen reaktiven Proxy , der die Reaktivität seiner eigenen Eigenschaft verfolgt, aber keine tiefen reaktiven Transformationen von verschachtelten Objekten durchführt (Primitivwerte offenlegt).

<script setup>
    const shallowObj = {
      name: 'shallowObj',
      age: 10,
      nested: {
        name: 'nested',
        bar: 2
      }
    }
    const shallowReactiveValue = shallowReactive(shallowObj)
    const updateShallowReactive = () => {
      // shallowReactiveValue.age++
      shallowReactiveValue.nested.bar++
    }
</script>

• Wenn die äußere Eigenschaft shallowReactiveValuevon geändert wird , ändert sich die Seite entsprechend, d. h. die äußere Eigenschaft reagiert, aber nestedwenn das verschachtelte Objekt geändert wird, wird die Seite nicht aktualisiert, d. h. das Objekt reagiert nicht;
• Wenn zwei Eigenschaften gleichzeitig geändert werden, wird die Ansicht aktualisiert, da die reagierende Eigenschaft die Ansicht aktualisiert, um den neuesten Wert zu erhalten;
• reactiveIm Gegensatz zu refwird jede Eigenschaft, die verwendet, nicht automatisch vom Proxy entpackt;
• Wenn das übergebene Objekt reaktiv ist, sind seine tief verschachtelten Eigenschaften ebenfalls reaktiv;

Schlussfolgerung: Der Unterschied zwischen shallowReactive und Reactive besteht darin, dass es nur die Eigenschaften der äußeren Schicht reaktionsfähig macht und die Eigenschaften von verschachtelten Objekten (gewöhnlichen Objekten) nicht reaktionsfähig sind;

5. ShallowReadonly

shallowReadonlyErstellt eine proxy, die ihre eigene Eigenschaft schreibgeschützt macht, aber keine tiefen schreibgeschützten Konvertierungen von verschachtelten Objekten durchführt (Primitivwerte verfügbar macht).

<script setup>
    // 传入普通对象
    const readOnlyObj = {
        age: 10,
        nested: {
            age: 2
        }
    }
    const shallowReadonlyValue0 = shallowReadonly(readOnlyObj)
    const updateShallowReadonly0 = () => {
        // 修改失败并会在控制台发出警告
        // shallowReadonlyValue.age++
        shallowReadonlyValue0.nested.age++
    }
    // 传入 reactive 声明的变量
    const readOnlyReactive = reactive({
        age: 10,
        nested: {
            age: 2
        }
    })
    const shallowReadonlyValue1 = shallowReadonly(readOnlyReactive)
    const updateShallowReadonly1 = () => {
        // 修改失败并会在控制台发出警告
        // shallowReadonlyValue.age++
        shallowReadonlyValue1.nested.age++
    }
</script>

• Wenn das eingehende Objekt ein gewöhnliches Objekt ist, können die äußeren Eigenschaften des Objekts nicht geändert werden, aber die Eigenschaften des verschachtelten Objekts können geändert werden, aber es reagiert nicht, und das Zielobjekt ändert sich;
• Wenn das eingehende Objekt reactiveein Objekt , können die äußeren Eigenschaften des Objekts nicht geändert werden, aber das Ändern der verschachtelten Eigenschaften des Objekts reagiert immer noch, und das Zielobjekt ändert sich ebenfalls entsprechend;
• readonlyIm Gegensatz zu refwird jede Eigenschaft, die verwendet, nicht automatisch vom Proxy entpackt;

6、flachRef

shallowRefErstellen Sie eine , die .valueÄnderungen ref, aber ihren Wert nicht auch responsiv macht;

<script setup>
    const shallowRefReac = {
        name: 'shallowRefReac',
        nested: {
            name: 'nested'
        }
    }
    const shallowRefValue = shallowRef(shallowRefReac)
    const updateShallowRefValue = () => {
        // 值会改变，但页面不会改变，说明 .value 的值不是一个响应式的属性 
        shallowRefValue.value.name += '+'
        // shallowRefValue.value.nested.name += '+'
        
        // shallowRefValue自身是响应式，修改 .value 页面会变化
        // shallowRefValue.value = '111'
        console.log(shallowRefValue) // RefImpl
    }
</script>

7, zuRef

toRefKann verwendet werden, um ein neues Objekt für eine Eigenschaft des reaktiven Quellobjekts zu erstellen ref, und refkann dann übergeben werden, um eine reaktive Verbindung zu seiner Quelleigenschaft aufrechtzuerhalten;

<script setup>
    const toRefReac = reactive({
      name: 'toRef'
    })
    const toRefValue = toRef(toRefReac, 'name')
    const updateToRefValue = () => {
      toRefValue.value += '+'
      console.log(toRefValue.value === toRefReac.name) // true
    }
</script>

• toRefDas vom ersten Parameter übergebene Zielobjekt muss eine reactivedeklarierte , und der zweite Parameter ist ein Eigenschaftsname im Zielobjekt. Wenn sein Wert geändert wird, ändert sich auch der entsprechende Eigenschaftswert des ursprünglichen Zielobjekts entsprechend der zweite Parameter ist ein Attribut, das im Zielobjekt nicht existiert, dann ist der Wert der deklarierten Variablen undefined;
• toRefDer Rückgabewert von ist eins ObjectRefImpl, was refsich davon unterscheidet , refdass es eins zurückgibt RefImpl;

8、zuRefs

toRefsKonvertieren Sie das responsive Objekt in ein normales Objekt, wobei jede Eigenschaft des Ergebnisobjekts auf die entsprechende Eigenschaft des ursprünglichen Objekts zeigt ref;

<script setup>
    const toRefsReac = reactive({
        name: 'toRefsReac',
        nested: {
            name: 'nested'
        }
    })
    const toRefsValue = toRefs(toRefsReac)
    console.log(toRefsValue) // { name: ObjectRefImpl, nested: ObjectRefImpl }
    const updateToRefsValue = () => {
        toRefsValue.name.value += '+'
        console.log(toRefsValue.name.value === toRefsReac.name) // true
    }
</script>

• toRefsWas empfangen wird, ist reactiveein Wert, der ein gemeinsames Objekt zurückgibt, und jedes Attribut des Objekts ist ein ObjectRefImplWert, der auf das entsprechende Attribut des Zielobjekts zeigt;
• Nützlich , wenn ein reaktives Objekt von einer zusammengesetzten Funktion zurückgegeben wird toRefs, damit die konsumierende Komponente das zurückgegebene Objekt destrukturieren/auflösen kann, ohne die Reaktivität zu verlieren;

<script setup>
    // const updateUseState = () => {
    //   name += '+'
    //   age += 1
    //    // 值变化了，但是页面不会改变，说明解构出来的变量是不具有响应式的
    //   console.log(name, age)
    // }
    // function useState() {
    //   const state = reactive({
    //     name: 'stateName',
    //     age: 10
    //   })
    //   return state
    // }
    
    // 使用 toRefs
    let { name, age } = useState()
    const updateUseState = () => {
        name.value += '+'
        age.value += 1
        // 值变化了，页面也会随之改变
        console.log(name, age) 
    }
    function useState() {
        const state = reactive({
            name: 'stateName',
            age: 10
        })
        return toRefs(state)
    }
</script>

9, berechnet

computedEs gibt zwei Möglichkeiten, berechnete Eigenschaften in Vue3 zu deklarieren: Die eine besteht darin, eine getterFunktion und getterein unveränderliches responsives refObjekt , die andere besteht darin, ein Objekt mit getundset Funktionen zu akzeptieren, um ein beschreibbares refObjekt ;

<script setup>
    // 方式一
    const reactiveValue1 = reactive({
        name: 'reactiveValue1',
        age: 10
    })
    const computedValue1 = computed(() => reactiveValue1.age + 1)
    const updateComputed1 = () => {
        // 修改失败，并在控制台发出警告
        computedValue1.value++
        console.log(computedValue1) // ComputedRefImpl
    }
    
    // 方式二
    const reactiveValue2 = reactive({
        name: 'reactiveValue2',
        age: 10
    })
    const computedValue2 = computed({
        get: () => reactiveValue2.age + 1,
        set: (val) => reactiveValue2.age = val - 1
    })
    const updateReactive2 = () => {
        reactiveValue2.age++
    }
    const updateComputed2 = () => {
        // 修改成功，页面也随之变化
        computedValue2.value++
        console.log(computedValue2) // ComputedRefImpl
    }
</script>

In Vue3 computedwird das Deklarieren von Variablen in Form von API deklariert. Es gibt zwei Formen, eine ist , die andere ist ein Objekt gettermit getund . Gleichzeitig kann die API auch den zweiten Parameter übergeben , der ein Objekt ist, das Two enthält Methoden und , sie können zum Debuggen verwendet werden;setcomputeddebuggerOptionsonTrackonTrigger

10. Uhr

watchthis.$watch Die API entspricht vollständig der optionalen API watch, die auf eine bestimmte Datenquelle lauschen und Seiteneffekte in einer separaten Callback-Funktion ausführen muss. Standardmäßig ist sie faul – das heißt, der Callback wird nur aufgerufen, wenn sich die lauschende Quelle ändert;

(1) Abhören einer einzelnen Datenquelle

<script setup>
    const watchReac = reactive({
        name: 'watchReac',
        nested: {
            name: 'nested',
            hobbies: ['篮球', '游戏']
        }
    })
    const watchValue = ref<any>('')
    // 侦听对象某一属性
    watch(() => watchReac.name, (val, preVal) => {
        console.log("watch: ", val, preVal)
        watchValue.value = val
    })
    // 侦听对象的嵌套对象
    // watch(() => watchReac.nested, (val, preVal) => {
    //    // 不会执行，需要传入第三个参数，{ deep: true }
    //    console.log("watch: ", val, preVal)
    //    watchValue.value = val
    // })
    // 侦听整个对象
    // watch(watchReac, (val, preVal) => {
    //    console.log("watch: ", val, preVal)
    //    watchValue.value = val
    // })
    const updateWatchValue = () => {
        watchReac.nested.name += '+'
    }
</script>

Beim Abhören einer einzelnen Datenquelle umfassen die übergebenen Parameter das abhörende Objekt, die Callback-Funktion und die Konfigurationsoptionen;

• Zuhörendes Objekt: zwei Formen, eine besteht darin, dass die Pfeilfunktion ein Objekt zurückgibt, und die andere gibt das zuhörende Objekt direkt weiter;
• Callback-Funktion: zwei Parameter, die der geänderte Wert und der Wert vor der Änderung sind;
• Konfigurationsoptionen: deepob tief zugehört werden soll, immediateob sofort ausgeführt werden soll;

(2) Abhören mehrerer Datenquellen

<script setup>
    const watchReac = reactive({
        name: 'watchReac',
        nested: {
            name: 'nested',
            hobbies: ['篮球', '游戏']
        }
    })
    const watchRef = ref(0)
    const watchReacValue = ref<any>('')
    const watchRefValue = ref<number>()
    watch([watchReac, watchRef], ([reacVal, refVal], [preReacVal, preRefVal]) => {
        watchReacValue.value = reacVal
        watchRefValue.value = refVal
    })
    const updateWatchValue = () => {
        watchReac.nested.name += '+'
        watchRef.value++
    }
</script>

Beim Abhören mehrerer Multidatenquellen umfassen die übergebenen Parameter Abhörobjekte, Callback-Funktionen und Konfigurationsoptionen;

• Listening-Objekt: Ein Array-Objekt muss übergeben werden, und das Array-Objekt enthält die zu überwachenden Daten;
• Rückruffunktion: zwei Parameter, die Parameter sind Array-Typen, die Werte des Arrays sind die Werte vor und nach der Änderung des hörenden Objekts, und die Reihenfolge entspricht der Reihenfolge des hörenden Objekts;
• Konfigurationsoptionen: deepob tief zugehört werden soll, immediateob sofort ausgeführt werden soll;

11、watchEffect

Um Seiteneffekte basierend auf dem reaktiven Zustand automatisch anzuwenden und erneut anzuwenden, können wir watchEffectdie Funktion , die eine übergebene Funktion sofort ausführt, während reaktiv ihre Abhängigkeiten verfolgt und die Funktion erneut ausführt, wenn sich ihre Abhängigkeiten ändern;

<script setup>
    const watchEffectRef = ref(0)
    const watchEffectReac = reactive({
        count: 0
    })
    watchEffect(() => {
        console.log("watchEffect: ", watchEffectRef.value)
    })
    const updateWatchEffect = () => {
        watchEffectReac.count++
        // watchEffectRef.value++
    }
</script>

• watchEffectDie Callback-Funktion wird sofort einmal ausgeführt und wird erst ausgeführt, nachdem sich die Abhängigkeit, die sie verfolgt, ändert, das heißt, wenn wir den Wert watchEffectReacvon watchEffectwird der Callback von nicht ausgeführt;
• watchEffectEs kann als mit immediateParametern watch;
• watchEffectStandardmäßig wird die Komponente ausgeführt, bevor die Komponente aktualisiert wird, und das Ausführungstiming kann über die flushKonfigurationsoptionen ;
• watchEffectDer zweite Parameter kann übergeben werden, einschließlich der Konfigurationselemente flush, onTrack, onTrigger;
  • flush: Es gibt drei Werte pre(Standard), post, sync;
    • pre: Standardwert, wird vor dem Komponenten-Update ausgeführt;
    • post: Wird ausgeführt, nachdem die Komponente aktualisiert wurde;
    • sync: Erzwungene Effekte werden immer synchron ausgelöst;
  • onTrack: aufgerufen, wenn eine reaktive Eigenschaft oder Referenz als Abhängigkeit verfolgt wird;
  • onTrigger: Wird aufgerufen, wenn eine Abhängigkeitsänderung einen Nebeneffekt auslöst;

Vue3 bietet auch watchPostEffectund watchSyncEffectzwei APIs, diese beiden sind Aliase watchEffectvon , aber der Wert vonwatcher Effect wird auf der Basis von konfiguriert , die bzw. sind ;flushpostsync