vue3 articles

1. Créer un projet vue3

1. Créé à l'aide de l'échafaudage vue-cli
   • L'installation de vue-cli nécessite que la version de l'échafaudage soit supérieure à 4.5
     • fil global ajouter @vue/cli
     • npm install -g @vue/cli
   • Créer un projet vue3 : vue create my-project
2. 使用vite安装并指定模板
   • npm créer vite@latest my-vue-app --template vue
   • fil créer vite my-vue-app --template vue
3. 直接安装（默认基于vite构建），根据提示安装需要的依赖
   • npm init vue@latest
4. La méthode 3 est recommandée.
5. La méthode d'installation spécifique peut se référer à
   • Installer avec vite
   • pose directe

2. Cycle de vie

1. 创建前：beforeCreate -> 使用setup()
2. 创建后：created -> 使用setup()
3. 挂载前：beforeMount -> onBeforeMount
4. 挂载后：mounted -> onMounted
5. Avant la mise à jour : beforeUpdate -> onBeforeUpdate
6. Après la mise à jour : mis à jour -> onUpdated
7. Avant destruction : beforeDestroy -> onBeforeUnmount
8. Après destruction : détruit -> onUnmounted
9. Capture d'exception : errorCaptured -> onErrorCaptured
10. Activé : onActivated est inclus dans le composant, il y aura deux autres fonctions de crochet de cycle de vie. Exécuté lorsqu'il est activé.
11. Commutateur : onDeactivated Par exemple, basculer du composant A au composant B, et exécuter lorsque le composant A disparaît

3. API combinée et API facultative

1. options Api est utilisé dans vue2. Écrivez chaque fonction sous l'API correspondante.当逻辑复杂的时候这种写法不利于代码阅读和代码维护。
2. L'API de composition est utilisée dans vue3. Écrivez chaque fonction indépendamment et complètement dans setup(){},有利于代码阅读和维护

4.ref Données réactives

1. effet:定义一个响应式数据
2. Syntaxe : const xxx = ref<type de données : chaîne|nombre> = (1)
3. Opération : xxx.value
4. utiliser:在模板中不需要使用.value 可以直接使用
5. Remarque : Vous pouvez définir des types de données de base ou des types de données complexes tels que des objets
   • Type de données de base : le principe de réactivité consiste toujours à effectuer le détournement de données et la mise à jour des données via get() et set() de Object.definedProperty().
   • Types de données complexes : l'aide interne réactive est implémentée via le proxy proxy

5. données de réponse réactives

1. effet:定义一个复杂类型的响应式数据，例如对象
2. Syntaxe : const xxx = réactif<type de données> = ({})
3. fonctionner:直接读取不需要.value
4. Remarques : Le fonctionnement des données de l'objet source via l'objet proxy Proxy est profond

6. Principe réactif

1. Vue2 implémente le détournement de données, la combinaison et le mode abonné de publication via get() et set() de Object.definedProperty().
2. Vue3 est implémenté par proxy
3. Avantages du ：不需要像Object.definedProperty()的那样遍历每一个属性，有一定的性能提升
   proxy proxy可以理解为在目标对象之前架设一层“拦截”，外界对该对象的访问都必须通过这一层拦截。这个拦截可以对外界的访问进行过滤和改写。
4. Lorsqu'il y a trop de propriétés, utilisez Object.definedProperty() pour surveiller chaque propriété en parcourant. L'utilisation d'un proxy ne nécessite pas de traversée et surveillera automatiquement tous les attributs, ce qui est propice à l'amélioration des performances

Sept. Surveillance de la montre

1. Écoutez un attribut ref :

watch(a,(newValue,oldValue)=>{
    
    },immediate:true,deep:true) // 得到的newValue和oldValue是一个值

2. Écoutez plusieurs attributs ref :

watch([a,b,c,...],(newValue,oldValue)=>{
    
    },immediate:true,deep:true)  // 得到的newValue和oldValue是一个数组

3. Écouter un bien en réactif :

watch(()=>a.name,(newValue,oldValue)=>{
    
    })

4. Écoutez quelques propriétés dans un réactif :

watch([()=>a.name,()=>a.age],(newValue,oldValue)=>{
    
    })

5. Écoutez tous les attributs dans un réactif :

watch(a,(newValue,oldValue)=>{
    
    })
// 无法获取oldValue
// 强制开启了深度监听（deep配置无效）

6. Écoutez les données de référence et réactives en même temps :

watch([a,()=>a.age],(newValue,oldValue)=>{
    
    })

7. Cas particulier:

watch(()=>a.job,(newValue,oldValue)=>{
    
    },deep:true)  
// job是一个复杂对象必须开启深度监听,无法获取oldValue
// 如果直接监听一个对象不需要开启深度监听
// 如果是用箭头函数形式则必须开启

Huit. surveillance watchEffect

1. Explication : Il n'est pas nécessaire de spécifier quel attribut, quel attribut est utilisé dans le corps de la fonction, est quel attribut est surveillé.
2. La différence entre la montre
   • Pas besoin d'importer manuellement les dépendances
   • Exécutez immédiatement, et une fonction de rappel sera exécutée à chaque fois qu'elle est initialisée pour obtenir automatiquement les dépendances
   • La valeur d'origine ne peut pas être obtenue, seule la valeur modifiée peut être obtenue
3. Syntaxe : watchEffect((newValue)=>{})
   

watchEffect(() => {
    
    
  userInfo.value = user.name + user.more.age;  // 可以看到上图中watchEffect实现了对name和age的监听
});

Neuf. toRef et toRefs

1. Fonction : Il peut être utilisé pour copier les attributs en réactif, puis les convertir en ref, ce qui conserve non seulement la réactivité mais également la référence. C'est-à-dire qu'après avoir modifié l'attribut copié à partir de réactif, en plus de la vue sera mise à jour, la valeur correspondante dans le réactif d'origine sera également mise à jour en conséquence.
2. toRef : copiez les attributs en réactif 单个et convertissez-les en ref
3. toRefs : copiez les attributs en réactif 所有et convertissez-les en ref
4. utiliser

// toRef的使用
<template>
	// toRef的使用
	<h1>{
    
    {
    
    username}}</h1>
	// toRef的使用
	<h1>{
    
    {
    
    age}}</h1>
</template>
<script setup>
  	import {
    
    reactive,toRef,toRefs} from 'vue'
	const info = reactive({
    
    
		name:'wangjiajia',
		age:'25'
	})
	// toRef的使用
	const username = toRef(info,'name')

	// toRefs的使用
	const {
    
    name,age} = toRefs(info)
</script>

5. Résumer
   • 使用toRef()解构出来的是对象中的某一个属性，可以在template中直接使用不用加.value。
   • 使用toRefs()是将整个对象解构，必须加上...，这样在template中就可以直接使用不用加.value。

10. peu profondeRéactive et peu profondeRef

1. effet:做数据响应式性能优化的
2. peu profondRéactif：只处理对象最外层的响应（浅层响应）
3. peu profondeRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。
4. Conditions d'utilisation:
   • 如果有一个对象类型数据，结构比较深，但变化时只是外层属性变化使用shallowReactive。
   • 如果有一个对象类型数据，不希望他是响应式，使用shallowRef
5. Par exemple:

// shallowReactive的使用
const userInfo = shallowReactive({
    
       // 只将第一层数据做了响应式处理 
	name:'wangjiajia',
	age:25,
	like:{
    
    
		food:{
    
    
			apple:'橙子'    // 深层次的数据将会是一个普通的对象
		}
	}
})

// shallowRef的使用
const userInfo = shallowRef({
    
       // userInfo将不在是一个响应式对象
	name:'wangjiajia'
}) 

Onze. en lecture seule et peu profonde en lecture seule

• lecture seulement:让一个响应式数据变为只读的。（深层次）
• peu profondLecture seule：让一个响应式数据变为只读的。（浅层次）
• Scénario d'application : ne souhaite pas que les données soient modifiées

let person=reactive({
    
    
    name:'张三',
    age:18,
    job:{
    
    
        j1:{
    
    
            salary:20
		}
	}
})
person = readonly(person)   // person里面的所有属性都不可以被修改
person = shallowReadonly(person)   // person里面只有第一层属性不可以被修改

12. toRaw et marqueRaw

1. àRaw :
   • effet:将一个reactive生成的响应式数据转为普通对象
   • scènes à utiliser :用于读取响应式对象对应的普通对象，对这个普通对象的所有操作不会引起页面更新
2. marqueRaw :
   • 标记一个对象使其永远不会成为响应式
   • Scénario d'application :
     • Certaines valeurs ne doivent pas être rendues réactives. Par exemple, certaines bibliothèques tierces complexes
     • Ignorer la réactivité peut améliorer les performances lors du rendu de grandes listes avec des sources de données immuables
3. La différence entre markRaw et readonly
   • markRaw标记一个对象使其永远不会成为响应式
   • readonly禁止对值得修改，响应式本身还存在。

13. Jugement des données réactives

1. isRef() : Vérifie si une valeur est un objet ref, renvoie true/false
2. isReactive : vérifie si un objet est un objet réactif, renvoie vrai/faux
3. isReadonly : vérifie si un objet est une propriété en lecture seule créée par readonly
4. isProxy : vérifie si un objet est un objet proxy

Quatorze. fournir et injecter

Focus sur la communication entre les composants

15. saut de routage vue3 (programmatique et déclaratif)

1. Déclaratif:<router-link :to="{name:'',query:{}}">
2. Programmatique :
   importez { useRouter } depuis 'vue-router' ;
   const router = useRouter();
   • Sans paramètres :
     • router.push('/home')
     • router.push({name:'home'})
     • router.push({chemin :'/home'})
   • Avec paramètres ---- paramètres de requête
     • router.push(name:'home',query:{id:1})
     • router.push(path:'/home',query:{id:1})
   • Avec paramètres ---- params pass paramètres
     • router.push(name:'home',params:{id:1})
   • Remarque : Vous pouvez utiliser le nom ou le chemin pour transmettre des paramètres dans la requête. Les paramètres seront épissés après le saut. Seul le nom peut être utilisé pour passer des paramètres dans params, et les paramètres ne seront pas fusionnés après le saut. Ainsi, la transmission de paramètres de requête n'est pas aussi sûre que la transmission de paramètres params.
   • Utilisez this.$router.push pour le saut de routage vue2, et le reste des paramètres sont les mêmes que vue3

Seize. Quels sont les principaux aspects de l'amélioration des performances de vue3 ?

1. système réactif
2. Volume de code source : En ajoutant le tree sharking au code source, le volume packagé du projet devient plus petit. Les modules sont chargés à la demande
3. Phase de compilation
   • L'algorithme diff est différent, vue2 traverse chaque nœud DOM. Vue3 consiste à marquer d'abord chaque nœud et à ne traverser que les nœuds avec des modifications marquées
   • Promotion statique : dans vue3, les éléments qui ne participent pas à la mise à jour seront promus statiquement, ce qui ne sera créé qu'une seule fois et utilisé directement la prochaine fois sans re-rendu
   • Ouvrir le cache de l'écouteur d'événements
   • Optimisation SSR (rendu du serveur), lorsque le contenu statique est suffisamment grand, un nœud statique sera généré.Ces nœuds statiques seront directement innerHtml, il n'est donc pas nécessaire de créer un objet, puis de rendre en fonction de l'objet

17. Objectifs de conception de vue3

1. Plus petit : chargement à la demande, avec une taille d'emballage plus petite
2. Plus rapide : algorithme de comparaison, amélioration statique, activation du cache de surveillance des événements, optimisation des performances
3. Plus convivial : le code source est maintenu via monorepo (une micro technologie frontale qui intègre du code)
   • composition Apimonorepo
   • meilleur support ts

18. Configuration dans vue3

19. L'ordre du cycle de vie des composants parents et des composants enfants

1. Par rapport à la fonction de cycle de vie externe, le cycle de vie d'exécution dans la configuration pointe d'abord vers la fonction de cycle de vie dans la configuration, puis exécute la fonction de cycle de vie externe.
2. La séquence globale est la suivante :
   • configuration du père
   • père surBeforeMount
   • configuration enfant
   • Enfant surBeforeMount
   • 子onMounted
   • 父onMounted
   • père surBeforeUpdate
   • enfant onBeforeUpdate
   • 子onUpdated
   • 父onUpdated
     
     
     

20. La méthode de communication des composants de vue3

• accessoires / émettre
• modèle en V
• fournir/injecter
• réfs
• EventBus
• vuex/pinia

1. props / emit
   
   
   
   
   

2. v-modèle：双向绑定，props + emit('update:xxx',xxx)
   
   
   

3. provide/inject

   • Il s'agit d'une paire d'API fournies dans Vue.
   • 无论层级多深，API 都可以实现父组件到子孙组件的数据传递。
   • Ne peut être utilisé que pour transmettre des valeurs des composants parents aux composants descendants.
   • Lorsque vous utilisez provide pour la transmission de données, essayez d'utiliser readonly pour encapsuler les données afin d'empêcher les composants enfants de modifier les données transmises par le composant parent.
   • 使用provide传过去的值一定要是proxy进行过代理的或者计算属性
     • Par exemple:provide('listData', computed(() => state.listData))
     • provide('listData', toRef(state.listData))
       
       

4. ref：réf + définirExposer({})
   
   

5. EventBus：Vue 3 中移除了 eventBus，但可以借助第三方工具来完成。Vue 官方推荐使用 mitt 或 tiny-emitter，在大多数情况下，不建议使用全局事件总线来实现组件通信。虽然比较简单粗暴，但是维护事件总线从长远来看是个大问题，这里就不解释了。
   

6.vuex / pinia：全局数据共享