Cet article vous présentera le sucre de syntaxe de configuration dans Vue3.2 pour vous assurer que vous pouvez le comprendre clairement. J'espère qu'il sera utile à tout le monde !
Qu'est-ce qui est exactement mis à jour dans vue3.2 ?
Le contenu mis à jour basé sur le contenu original comprend principalement les 5 éléments suivants :
1 SSR : Optimisation du rendu côté serveur. Le package @vue/server-renderer ajoute un module ES pour créer, [Recommandation associée : tutoriel vidéo vue.js]
est découplé de Node.js, afin que @vue/serve-render puisse être utilisé comme serveur dans un environnement sans nœud, le rendu est possible,
tel que (travailleurs, techniciens de service)
2 Nouvelles fonctionnalités SFC : nouvelles fonctionnalités de composant de fichier unique
3. Nous l'utilisons rarement, mais nous devrions le savoir
4. API Effect Scope : effect scope,
est utilisé pour contrôler directement le temps de sortie des effets secondaires réactifs (calculés et observateurs).
Il s'agit d'une mise à jour de la bibliothèque sous-jacente. Vous n'avez pas à vous en soucier pour le développement, mais vous devez le savoir
5 Améliorations des performances : amélioration des performances. Il s'agit d'une amélioration interne et n'a rien à voir avec le développement
Une brève introduction à la configuration
Au début, les variables exposées Vue3.0 doivent être renvoyées avant de pouvoir être utilisées dans le modèle ;
Cela entraînera les variables doivent apparaître plusieurs fois sur la page.
Très peu convivial, vue3.2 n'a besoin que d'ajouter setup dans la balise script.
peut nous aider à résoudre ce problème.
1. Les composants doivent uniquement être introduits sans inscription, et les attributs et méthodes n'ont pas besoin d'être renvoyés
Il n'est pas nécessaire d'écrire une fonction de configuration ou d'exporter par défaut
Même les instructions personnalisées peuvent être automatiquement obtenues dans notre. modèle. Les variables et les méthodes n'ont pas besoin d'être renvoyées.
<template>
<div class="home">
显示的值{{flag }}
<button @click="changeHander">改变值</button>
</div>
</template>
<!-- 只需要在script上添加setup -->
<script lang="ts" setup>
import { ref } from 'vue';
<!-- flag变量不需要在 return出去了 -->
let flag=ref("开端-第一次循环")
<!-- 函数也可以直接引用,不用在return中返回 -->
let changeHander=():void=>{
flag.value='开端-第二次循环'
}
</script><!-- 这个是组件 -->
<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 utilise
Le composant parent transmet les paramètres在 script setup 中，
引入的组件可以直接使用无需再通过components进行注册，[是不是真的很香啊!]
并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。
当我们的页面上需要使用很多组件时，它的功能一下就体现出来了。
刚刚我一直在强调,不需要使用setup函数，机智的小伙伴会说: 那么子组件怎么接受父组件传递过来的值呢? props，emit怎么获取呢? 别担心,新的api出现了,我们的主角 defineProps复制代码
Événement de lancer ? DefinEmits arrive !
Le composant enfant utilise
<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='公交车-第一次循环'
</script><template>
<div>
<h2> 你好-我是肖鹤云</h2>
<p>信息:{{ info}}</p>
<p>{{ time }}</p>
</div>
</template>
<script lang="ts" setup>
import {defineProps} from 'vue'
defineProps({
info:{
type:String,
default:'----'
},
time:{
type:String,
default:'0分钟'
},
})
</script>
composant enfant
别担心，我们使用defineEmits。它可以像父组件抛出事件。
<template>
<div>
<h2> 你好-我是肖鹤云</h2>
<button @click="hander1Click">新增</button>
<button @click="hander2Click">删除</button>
</div>
</template>
<script lang="ts" setup>
import {defineEmits} from 'vue'
// 使用defineEmits创建名称，接受一个数组
let $myemit=defineEmits(['myAdd','myDel'])
let hander1Click=():void=>{
$myemit('myAdd','新增的数据')
}
let hander2Click=():void=>{
$myemit('myDel','删除的数据')
}
</script><template>
<div class="home">
<test-com @myAdd="myAddHander" @myDel='myDelHander'></test-com>
</div>
</template>
<script lang="ts" setup>
// 组件命名采用的是大驼峰，引入后不需要在注册，是不是爽歪歪呀!
//在使用的使用直接是小写和横杠的方式连接 test-com
import TestCom from "../components/TestCom.vue"
let myAddHander=(mess):void=>{
console.log('新增==>',mess);
}
let myDelHander=(mess):void=>{
console.log('删除==>', mess);
}
</script>
<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('男')
let info=reactive({
like:'喜欢李诗晴',
age:27
})
// 将组件中的属性暴露出去，这样父组件可以获取
defineExpose({
sex,
info
})
</script>复制代码<template>
<div class="home">
<test-com @myAdd="myAddHander" @myDel='myDelHander' ref="testcomRef"></test-com>
<button @click="getSonHander">获取子组件中的数据</button>
</div>
</template>
<script lang="ts" setup>
import TestCom from "../components/TestCom.vue"
import {ref} from 'vue'
const testcomRef = ref()
const getSonHander=()=>{
console.log('获取子组件中的性别', testcomRef.value.sex );
console.log('获取子组件中的其他信息', testcomRef.value.info );
}
</script>复制代码v-memod会记住一个模板的子树,元素和组件上都可以使用。
该指令接收一个固定长度的数组作为依赖值进行[记忆比对]。
如果数组中的每个值都和上次渲染的时候相同，则整个子树的更新会被跳过。
即使是虚拟 DOM 的 VNode 创建也将被跳过，因为子树的记忆副本可以被重用。
因此渲染的速度会非常的快。
需要注意得是:正确地声明记忆数组是很重要。
开发者有责任指定正确的依赖数组，以避免必要的更新被跳过。
<li v-for="item in listArr" :key="item.id" v-memo="['valueA'，'valueB']">
{{ item.name }}
</li>
v-memod的指令使用较少，它的作用是:缓存模板中的一部分数据。
只创建一次，以后就不会再更新了。也就是说用内存换取时间。复制代码 
Épilogue
Si vous pensez que mon écriture est bonne, cliquez pour la recommander. Personne ne m’a recommandé depuis des mois. J'ai entendu dire que le petit frère qui m'a donné une récompense a trouvé une petite amie, Hé ! Si vous n'y croyez pas, donnez-moi une récompense et jetez un œil !
Vous êtes assuré de trouver la personne que vous aimezPour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
