Detaillierte Erläuterung der Setup-Syntax Zucker, berechnete Funktion und Überwachungsfunktion in Vue3

Dieser Artikel wird Ihnen helfen, Vue3 zu lernen und die Setup-Syntax, die berechnete Funktion und die Überwachungsfunktion in Vue3 zu verstehen. Ich hoffe, er wird Ihnen hilfreich sein!

setup syntaktischer Zucker

Haben Sie bemerkt, dass es in den Fallcodes in unseren vorherigen Artikeln einige ähnliche Codes in den Vorlagen für jeden Fall gibt, diese Codes sind unsere Setup-Funktion, aber wie die Eingabefunktion der kombinierten API, alle unsere kombinierten APIs müssen darin geschrieben werden. Tatsächlich stellt Vue den syntaktischen Zucker zur Verfügung. [Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung]

Zum Beispiel ist das V-Modell in unserem Vue2 nur Syntaxzucker. Mit einem solchen Befehl können Sie viel bidirektionalen Datenbindungscode einsparen ! Schauen wir uns dann an, wie unser Setup vereinfacht werden kann. Am Beispiel des folgenden Codes deklarieren wir eine Funktion und klicken auf die Schaltfläche, um einen einfachen Effekt des Druckens auszulösen Der Codeeffekt und die funktionale Implementierung sind gleich; im Skript-Setup-Tag können alle Daten und Funktionen direkt in der Vorlage verwendet werden! Sie können es ausprobieren. Sie können die Beispiele in unserem Vue3-Transparenz-Tutorial [4] mit Setup-Syntax-Zucker modifizieren!

Die Variablen der obersten Ebene im Skript-Setup können direkt in der Vorlage verwendet werden

---

berechnete FunktionIm letzten Artikel haben wir zwei kombinierte APIs kennengelernt, ref und reaktiv Ich glaube, jeder muss wissen, dass es sich um unsere berechnete Datendefinitionsfunktion handelt, aber jetzt ist es die berechnete Funktion. Verwendung berechneter Funktionen: Unter welchen Umständen müssen wir berechnete Eigenschaften verwenden, um neue Daten über abhängige Daten zu erhalten?

1) Führen Sie die Berechnung aus Vue ein

2) Verwenden Sie es im Setup, verwenden Sie eine Funktion, der Rückgabewert der Funktion sind die berechneten Daten

3) Geben Sie es schließlich über das Setup zurück und verwenden Sie die Vorlage, wenn Sie die Setup-Syntax Sugar verwenden Tatsächlich ist dieser Schritt am Ende nicht erforderlich

Wir können ein einfaches Beispiel geben: Wenn wir beispielsweise eine Punktezahl definieren, reine Punkteinformationen, dann verwenden wir die berechnete Funktion, um mehr als 60 bestandene Punkte für uns zu berechnen. Wir werden es direkt verwenden. Codiert mit Skript-Setup!

<template>
    <div>
        <button @click="hello">hello</button>
    </div>
</template>

<script>
export default {
    setup() {
        const hello = () => {
            console.log(&#39;hi&#39;)
        }

        return { hello }
    }
}
</script>

ÜberwachungsfunktionWie die berechnete Funktion ist auch die Überwachungsfunktion ein Mitglied der kombinierten API. Wozu dient sie also in Vue3? Sie können Watch verwenden, um eine oder mehrere Reaktionsdaten zu überwachen, Sie können Watch verwenden, um ein Attribut in den Reaktionsdaten zu überwachen (einfache Daten oder komplexe Daten), Sie können eine umfassende Überwachung konfigurieren oder Sie können Watch Monitoring verwenden, um die Standardausführung zu implementieren Probieren Sie den Code separat aus. So schreiben Sie

Überwachen Sie Daten über Watch

Watcha überwacht Daten. Die Funktion hat zwei Parameter: Der erste sind die zu überwachenden Daten und der zweite Parameter ist die Rückruffunktion Wird ausgelöst, nachdem sich der Überwachungswert geändert hat. Die Rückruffunktion verfügt außerdem über zwei Parameter: neuer Wert und alter Wert Änderungen in Num- und Benutzerobjekten müssen überwacht werden. Die Funktion verfügt über zwei Parameter: Der erste sind die zu überwachenden Daten (ein Array wird verwendet, da es sich um mehrere Daten handelt), und der zweite Parameter ist die Rückruffunktion, die bei der Überwachung ausgelöst wird Wertänderungen.

<template>
    <div>
        <button @click="hello">hello</button>
    </div>
</template>

<script setup>
const hello = () => {
    console.log(&#39;hi&#39;)
}
</script>

Überwachen Sie ein Attribut des Objekts durch Watch (einfacher Typ)

watch überwacht ein Attribut des Objekts und es ist ein einfacher Attributtyp. Wir überwachen beispielsweise den Alterswert Im Benutzer unten ist er ein einfacher Typ, daher muss die erste Parameterform unserer Uhr eine Funktion sein, die die Objekteigenschaften als Rückgabewert verwendet. Der zweite Parameter ist die geänderte Rückruffunktion.

<template>
    <div>
        <p>成绩单</p>
        <a v-for="num in achievement"> {{ num }} / </a>
        <p>及格成绩单</p>
        <a v-for="num in passList"> {{ num }} / </a>
    </div>
</template>

<script setup>
import { computed, ref } from &#39;vue&#39;;

const achievement = ref([44, 22, 66, 77, 99, 88, 70, 21])

const passList = computed(() => {
    return achievement.value.filter(item => item > 60)
})
</script>

Überwachen Sie eine Eigenschaft des Objekts (komplexer Typ) durch Beobachten

watch监听对象的一个属性并且是复杂类型的属性，比如下面的我们要监听user中的info，我们尝试一下改变user中info中的wages值，那我们watch的第一个参数形式需要是将对象属性作为返回值的函数；第二个参数是改变后的回调函数。这时候还需要第三个参数那就是 deep 开启深度监听

<template>
    <p>姓名：{{ user.name }}</p>
    <p>年龄：{{ user.age }}</p>
    <p>薪资：{{ user.info.wages }}</p>
    <button @click="user.age++">过年啦</button>
    <button @click="user.info.wages+=2000">加薪了</button>
</template>

<script setup>
import { ref, watch, reactive } from &#39;vue&#39;;
let user = reactive(
    {
        name: "几何心凉",
        age: 18,
        info:{
            wages:20000
        }
    }
)
watch(()=>user.info, () => {
    console.log(&#39;我监听到了user.info的变化&#39;)
},{
    deep:true
})
</script>

通过watch监听数据默认执行

其实这种情况并不多但是也会遇到这种情况，就是我们在监听数据变化的时候，先默认执行一次；其实就是添加我们的immediate参数为true，我们以最初的num为例哈！

<template>
    <div>
        总赞数：{{ num }} <button @click="num++">点赞</button>
    </div>
</template>

<script setup>
import { ref, watch, reactive } from &#39;vue&#39;;
const num = ref(0)
watch(num, () => {
    console.log(&#39;我打印了&#39;)
},{
    immediate:true
})
</script>

写在最后

掌握了setup语法糖，我们编码更便捷，并且带领大家掌握 computed、watch 函数的使用，希望大家能够自己实现上面的案例功能哦，做到真正的掌握这些点！下一篇文章中我们将带领大家学习Vue3的生命周期，拭目以待吧！各位小伙伴让我们 let’s coding！

（学习视频分享：vuejs入门教程、编程基础视频）

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Setup-Syntax Zucker, berechnete Funktion und Überwachungsfunktion in Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!