Lassen Sie uns ausführlich über die Setup-Syntax von Sugar in Vue3.2 sprechen

Dieser Artikel stellt Ihnen die Setup-Syntax von Sugar in Vue3.2 vor, um sicherzustellen, dass Sie sie klar verstehen. Ich hoffe, dass er für alle hilfreich ist!

Was genau wird in vue3.2 aktualisiert?

Der aktualisierte Inhalt basierend auf dem Originalinhalt umfasst hauptsächlich die folgenden 5 Teile:

1. SSR: Serverseitige Rendering-Optimierung. Das @vue/server-renderer-Paket fügt ein zu erstellendes ES-Modul hinzu. [Verwandte Empfehlung: vue.js Video-Tutorial]

ist von Node.js entkoppelt, sodass @vue/serve-render als Server verwendet werden kann in einer Nicht-Node-Umgebung ist Rendering möglich,

wie (Worker, Service Worker)

2 Neue SFC-Funktionen: Neue Einzeldateikomponentenfunktionen

3. Wir verwenden dies selten, aber wir sollten es wissen.

4. Effektbereich-API: Effektbereich,

wird verwendet, um die Veröffentlichungszeit von Reaktionsnebeneffekten (berechnet und Beobachter) direkt zu steuern.

Dies ist ein Update der zugrunde liegenden Bibliothek. Sie müssen sich darüber keine Sorgen machen, aber Sie sollten es wissen

5. Dies ist eine interne Verbesserung und hat nichts mit der Entwicklung zu tun.

Eine kurze Einführung in das Setup Die Variablen erscheinen mehrmals auf der Seite. Sehr unfreundlich, vue3.2 muss nur Setup im Skript-Tag hinzufügen.

kann uns helfen, dieses Problem zu lösen.

1. Komponenten müssen nur ohne Registrierung eingeführt werden, und Eigenschaften und Methoden müssen nicht zurückgegeben werden.

Es ist nicht erforderlich, eine Setup-Funktion zu schreiben oder Standardeinstellungen zu exportieren.

Sogar benutzerdefinierte Anweisungen können automatisch abgerufen werden Vorlage. „Variablen und Methoden müssen nicht zurückgegeben werden.“

<template>
  <div class="home">
    显示的值{{flag }}
    <button @click="changeHander">改变值</button>
  </div>
</template>
<!-- 只需要在script上添加setup -->
<script lang="ts" setup>
    import { ref } from &#39;vue&#39;;

    <!-- flag变量不需要在 return出去了 -->
    let flag=ref("开端-第一次循环")

    <!-- 函数也可以直接引用,不用在return中返回 -->
    let changeHander=():void=>{
        flag.value=&#39;开端-第二次循环&#39;
    }

</script>

DefineProps hinzugefügt

<!-- 这个是组件 -->
<template>
    <div>
        <h2> 你好-我是肖鹤云</h2>
    </div>
</template>


使用的页面
<template>
  <div class="home">
    <test-com></test-com>
  </div>
</template>
<script lang="ts" setup>
// 组件命名采用的是大驼峰，引入后不需要在注册，是不是爽歪歪呀!
//在使用的使用直接是小写和横杠的方式连接 test-com
import TestCom from "../components/TestCom.vue"
</script>

defineProps verwendet

Übergeordnete Komponente übergibt Parameter

在 script setup 中，
引入的组件可以直接使用无需再通过components进行注册，[是不是真的很香啊!]
并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。
当我们的页面上需要使用很多组件时，它的功能一下就体现出来了。

Wie akzeptiert die untergeordnete Komponente. Parameter

刚刚我一直在强调,不需要使用setup函数，机智的小伙伴会说:
那么子组件怎么接受父组件传递过来的值呢?
props，emit怎么获取呢?
别担心,新的api出现了,我们的主角 defineProps复制代码

Event werfen? defineEmits kommt!

Untergeordnete Komponente verwendet

<template>
  <div class="home">
    <test-com :info="msg" time="42分钟"></test-com>
  </div>
</template>
<script lang="ts" setup>
// 组件命名采用的是大驼峰，引入后不需要在注册，是不是爽歪歪呀!
import TestCom from "../components/TestCom.vue"
let msg=&#39;公交车-第一次循环&#39;
</script>

übergeordnete Komponente

<template>
    <div>
        <h2> 你好-我是肖鹤云</h2>
        <p>信息:{{ info}}</p>
        <p>{{ time }}</p>
    </div>
</template>
<script lang="ts" setup>
import {defineProps} from &#39;vue&#39;
defineProps({
    info:{
        type:String,
        default:&#39;----&#39;
    },
    time:{
        type:String,
        default:&#39;0分钟&#39;
    },
})
</script>

So erhalten Sie den Attributwert in der untergeordneten Komponente

untergeordnete Komponente

别担心，我们使用defineEmits。它可以像父组件抛出事件。
<template>
    <div>
        <h2> 你好-我是肖鹤云</h2>
        <button @click="hander1Click">新增</button>
        <button @click="hander2Click">删除</button>
    </div>
</template>

<script lang="ts" setup>
 import {defineEmits} from &#39;vue&#39;
//  使用defineEmits创建名称，接受一个数组
let $myemit=defineEmits([&#39;myAdd&#39;,&#39;myDel&#39;])
let hander1Click=():void=>{
    $myemit(&#39;myAdd&#39;,&#39;新增的数据&#39;)
}

let hander2Click=():void=>{
    $myemit(&#39;myDel&#39;,&#39;删除的数据&#39;)
}
</script>

Übergeordnete Komponente

<template>
  <div class="home">
    <test-com @myAdd="myAddHander" @myDel=&#39;myDelHander&#39;></test-com>
  </div>
</template>
<script lang="ts" setup>
// 组件命名采用的是大驼峰，引入后不需要在注册，是不是爽歪歪呀!
//在使用的使用直接是小写和横杠的方式连接 test-com
import TestCom from "../components/TestCom.vue"
let myAddHander=(mess):void=>{
  console.log(&#39;新增==>&#39;,mess);
}

let myDelHander=(mess):void=>{
  console.log(&#39;删除==>&#39;, mess);
}
</script>

Neuer Befehl v-memo

<template>
    <div>
        <h2> 你好-我是肖鹤云</h2>
        <p>性别:{{ sex}}</p>
        <p>其他信息:{{ info}}</p>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref,defineExpose } from "vue";
let sex=ref(&#39;男&#39;)
let info=reactive({
    like:&#39;喜欢李诗晴&#39;,
    age:27
})
// 将组件中的属性暴露出去，这样父组件可以获取
defineExpose({
    sex,
    info
})
</script>复制代码

style v-bind Dieser Student hat das Labor abgeschlossen

<template>
  <div class="home">
    <test-com @myAdd="myAddHander" @myDel=&#39;myDelHander&#39; ref="testcomRef"></test-com>
    <button @click="getSonHander">获取子组件中的数据</button>
  </div>
</template>
<script lang="ts" setup>
import TestCom from "../components/TestCom.vue"
import {ref} from &#39;vue&#39;
const testcomRef = ref()
const getSonHander=()=>{
  console.log(&#39;获取子组件中的性别&#39;, testcomRef.value.sex );
  console.log(&#39;获取子组件中的其他信息&#39;, testcomRef.value.info );
}
</script>复制代码

style v-bind verwandelt Spanne in Rot

v-memod会记住一个模板的子树,元素和组件上都可以使用。
该指令接收一个固定长度的数组作为依赖值进行[记忆比对]。
如果数组中的每个值都和上次渲染的时候相同，则整个子树的更新会被跳过。
即使是虚拟 DOM 的 VNode 创建也将被跳过，因为子树的记忆副本可以被重用。
因此渲染的速度会非常的快。
需要注意得是:正确地声明记忆数组是很重要。
开发者有责任指定正确的依赖数组，以避免必要的更新被跳过。
<li v-for="item in listArr"  :key="item.id"  v-memo="[&#39;valueA&#39;，&#39;valueB&#39;]">
    {{ item.name   }}
</li>
v-memod的指令使用较少，它的作用是:缓存模板中的一部分数据。
只创建一次，以后就不会再更新了。也就是说用内存换取时间。复制代码

Epilog

Wenn Sie mein Schreiben für gut halten, klicken Sie, um es zu empfehlen. Ich wurde seit Monaten von niemandem empfohlen. Ich habe gehört, dass der kleine Bruder, der mir eine Belohnung gegeben hat, eine Freundin gefunden hat,

Hey! Wenn du es nicht glaubst, gib mir eine Belohnung und schau es dir an!

Sie werden garantiert die Person finden, die Ihnen gefälltWeitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonLassen Sie uns ausführlich über die Setup-Syntax von Sugar in Vue3.2 sprechen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!