API composite

installation

Le moment de l'exécution de la configuration
- Exécuté une fois avant beforeCreate, ceci n'est pas défini.

paramètre de configuration

props : la valeur est un objet, comprenant : les propriétés transmises de l'extérieur du composant et reçues par la déclaration interne du composant.

// 第一种情况
<script>
export default {
  props: {
    num: Number
  },
  setup(props) {
    console.log(props.num)
    return
  }
}
</script>

// 第二种情况
<script setup>
	const props = defineProps({
 	 	num: Number
	})
	console.log(props.num)
</script>

contexte : objet de contexte
- L'objet de contexte n'est pas réactif et peut être déstructuré en toute sécurité : { attrs, slots, emission, expose }
- attrs : la valeur est un objet, comprenant : des attributs passés de l'extérieur du composant mais non déclarés dans la configuration des accessoires, équivalent à this.$attrs.
- slots : contenu du slot reçu, équivalent à this.$slots.
- émission : une fonction qui distribue des événements personnalisés, équivalent à this.$emit.
```
// 模板
<template>
  <div>
    {
       
       {num}}
    <button @click="emit('change')">num++</button>
  </div>
</template>

// 第一种情况
<script>
export default {
  emits: ['change'],
  props: {
    num: Number
  },
  setup(p, context) {
    console.log(p, context.emit)
    return {
      emit: context.emit
    }
  }
}
</script>

// 第二种情况
<script setup>
const props = defineProps({
  num: Number
})
const emit = defineEmits(['change'])
</script>
```

API réactive

réf

Rôle : Définir une donnée responsive
grammaire:const xxx = ref(initValue)
- Créez un objet de référence (objet de référence, objet de référence en abrégé) qui contient des données réactives .
- Manipulation de données en JS :xxx.value
- Lire les données dans le modèle : pas besoin de .value, directement :<div>{ {xxx}}</div>
Remarque:
- Les données reçues peuvent être : type de base ou type d'objet.
- Types de données de base : Réactif est toujours fiable Object.defineProperty()et getcomplet set.
- Données de type objet : "sauve" en interne une nouvelle fonction dans Vue3.0 - reactivefonction.

réactif

Fonction : définissez un type d'objet de données réactives (ne l'utilisez pas pour les types de base, mais utilisez refdes fonctions)
Syntaxe : const 代理对象= reactive(源对象)reçoit un objet (ou un tableau) et renvoie un objet proxy (l'objet instance de Proxy, appelé objet proxy)
Les données réactives définies par réactive sont « profondes ».
L'implémentation de proxy interne basée sur ES6 fonctionne sur les données internes de l'objet source via l'objet proxy.

peu profondeRéactive与shallowRef

shallowReactive : gère uniquement la réponse (shallow response) des propriétés les plus externes de l'objet.
shallowRef : ne gère que la réponse des types de données de base, pas la réponse des objets.

readonly与shallowReadonly

Prend un objet (réactif ou brut) ou une référence et renvoie un proxy en lecture seule
readonly : rendre une donnée réactive en lecture seule (lecture seule approfondie).
shallowReadonly : rendre les données réactives en lecture seule (lecture seule peu profonde).

import { reactive, readonly, watchEffect } from 'vue'
const original = reactive({ count: 0 })

const copy = readonly(original)

watchEffect(() => {
  console.log(copy.count)
})

original.count++

copy.count++ // warning!

calculé

import {computed} from 'vue'

setup(){
    ...
	//计算属性——简写
    let fullName = computed(()=>{
        return person.firstName + '-' + person.lastName
    })
    //计算属性——完整
    let fullName = computed({
        get(){
            return person.firstName + '-' + person.lastName
        },
        set(value){
            const nameArr = value.split('-')
            person.firstName = nameArr[0]
            person.lastName = nameArr[1]
        }
    })
}

montre

Compatible avec la fonction de configuration de la montre dans Vue2.x
Deux petits "fosse":
- Lors de la surveillance des données réactives définies par reactive : oldValue ne peut pas être obtenu correctement et la surveillance approfondie est activée de force (la configuration approfondie n'est pas valide).
- Lors de la surveillance d'un attribut dans les données réactives définies par réactive : la configuration approfondie est valide.

//情况一：监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{
	console.log(newValue,oldValue)
},{immediate:true})

//情况二：监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{
	console.log(newValue,oldValue)
}) 

/* 情况三：监视reactive定义的响应式数据
			若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
			若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{
	console.log(newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效

//情况四：监视reactive定义的响应式数据中的某个属性
watch(()=>person.job,(newValue,oldValue)=>{
	console.log(newValue,oldValue)
},{immediate:true,deep:true}) 

//特殊情况
watch(()=>person.age,(newValue,oldValue)=>{
    console.log(newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

watchEffet

Il n'est pas nécessaire de spécifier quelle propriété surveiller, quelle propriété est utilisée dans le rappel de surveillance, puis quelle propriété surveiller.
watchEffect est un peu comme computed :
- Mais computed fait attention à la valeur calculée (la valeur de retour de la fonction de rappel), donc la valeur de retour doit être écrite.
- Et watchEffect accorde plus d'attention au processus (le corps de la fonction de rappel), il n'est donc pas nécessaire d'écrire la valeur de retour.

watchEffect(()=>{
    const num1 = sum.value
    const num2 = person.age
    console.log('watchEffect')
})

toRef et toRefs

Lorsqu'une propriété de l'objet réactif est fournie pour un usage externe uniquement

const name = toRef(person,'name')
return {
  ...toRefs(obj),
  msg
}

Vérifie l'API

isRef : vérifie si une valeur est un objet de référence.
unref : renvoie la valeur interne si l'argument est une référence, sinon renvoie l'argument lui-même. Ceci est une fonction sucre (val = isRef(val) ? val.value : val)
isProxy : Vérifie si l'objet est un proxy créé par réactif, readonly,shallowReactive,shallowReadonly.
isReactive : vérifie si l'objet est réactif, peu profondRéactif
isReadonly : vérifie si l'objet est en lecture seule, peu profondReadonly

autre

Exemple : créer une référence anti-rebond qui ne met à jour la valeur qu'après un certain délai après l'appel de set le plus récent :
- La méthode track est placée dans get pour indiquer que ces données doivent suivre les changements
- Vue analyse le modèle pour déclencher le déclencheur d'événement, indiquant à Vue de déclencher la mise à jour de la page

<template>
	<input type="text" v-model="keyword">
	<h3>{
   
   {keyword}}</h3>
</template>

<script>
	import {ref,customRef} from 'vue'
	export default {
		name:'Demo',
		setup(){
			// let keyword = ref('hello')
			function myRef(value,delay){
				let timer
				return customRef((track,trigger)=>{
					return{
						get(){
							track()
							return value
						},
						set(newValue){
							clearTimeout(timer)
							timer = setTimeout(()=>{
								value = newValue
								trigger()
							},delay)
						}
					}
				})
			}
			let keyword = myRef('hello',500)
			return {
				keyword
			}
		}
	}
</script>

toRaw et markRaw

àRaw：
- Fonction : Convertit un objet responsivereactive généré par un bot en un objet normal .
- Scénario d'utilisation : Il est utilisé pour lire l'objet commun correspondant à l'objet responsive. Toutes les opérations sur cet objet commun ne provoqueront pas de mises à jour de la page.
```
const foo = {}
const reactiveFoo = reactive(foo)

console.log(toRaw(reactiveFoo) === foo) // true
```
marqueRaw：
- Rôle : marquer un objet afin qu'il ne redevienne plus jamais un objet réactif.
- Scénario d'application :
  1. Certaines valeurs ne doivent pas être définies comme réactives, telles que les bibliothèques tierces complexes, etc.
  2. Ignorer les transformations réactives peut améliorer les performances lors du rendu de listes volumineuses avec des sources de données immuables.
```
const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false

// also works when nested inside other reactive objects
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false
```

cycle de vie

Les crochets de cycle de vie de Vue2.x peuvent continuer à être utilisés dans Vue3.0, mais deux d'entre eux ont été renommés :
- beforeDestroyrenommer enbeforeUnmount
- destroyedrenommer enunmounted
Vue3.0 fournit également des crochets de cycle de vie sous la forme d'une API de composition, et la relation correspondante avec les crochets dans Vue2.x est la suivante :
- beforeCreate===>setup()
- created=======>setup()
- beforeMount===>onBeforeMount
- mounted=======>onMounted
- beforeUpdate===>onBeforeUpdate
- updated=======>onUpdated
- beforeUnmount==>onBeforeUnmount
- unmounted=====> onUnmountedEnregistre un crochet à appeler lorsqu'une erreur propagée à partir d'un composant descendant est interceptée.
autre cycle de vie

fournir et injecter

Rôle : Réaliser la communication entre les composants ancêtres et descendants
Les composants parents ont la providepossibilité de fournir des données et les composants descendants ont la injectpossibilité de commencer à consommer ces données.

// 祖级
setup(){
	const add=()=>{
		num.value++
	}
    provide('add',add)
}

// 后代
setup(){
    const add=inject('add')
	return{
	add
	}
}

erreur capturée)

fournir et injecter

[Transfert d'image de lien externe...(img-28sDWGYu-1651830543792)]

Rôle : Réaliser la communication entre les composants ancêtres et descendants
Les composants parents ont la providepossibilité de fournir des données et les composants descendants ont la injectpossibilité de commencer à consommer ces données.

// 祖级
setup(){
	const add=()=>{
		num.value++
	}
    provide('add',add)
}

// 后代
setup(){
    const add=inject('add')
	return{
	add
	}
}

Résumé de l'API commune VUE3.0

API composite

installation

API réactive

réf

réactif

peu profondeRéactive与shallowRef

readonly与shallowReadonly

calculé

montre

watchEffet

toRef et toRefs

Vérifie l'API

autre

toRaw et markRaw

cycle de vie

fournir et injecter

fournir et injecter

Je suppose que tu aimes