编程知识 cdmana.com

Vue 3 tri des documents démarrage rapide

Un.、setup

Type combiné API

  1. setup L'option doit être une fonction
  2. setup La fonction options accepte deux arguments: props Et context
  3. setup La fonction options doit renvoyer le contenu à exposer au composant

setup À utiliser return Retour,Pour l'utilisation de composants,Contient des donnéesEtMéthodes

1. setup Premier argument dans la fonction —— props

setup En fonction props C'est réactif.,Quand un nouveau prop Heure,Il sera mis à jour

export default {
  props: {
    title: String
  },
  setup(props) {
    console.log(props.title)
  }
}
Copier le Code

Mais,Parce que props C'est réactif.,Toi.Non disponible ES6 Déconstruction,Parce que ça va éliminer prop Réactivité.
Si vous devez déconstruire prop,Peut être réalisé en utilisant setup En fonction toRefs Pour effectuer cette opération en toute sécurité .

import { toRefs } from 'vue'

setup(props) {
    const { title } = toRefs(props)

    console.log(title.value)
}
Copier le Code

2. setup Deuxième argument dans la fonction —— context

context  Le contexte est un JavaScript Objet, Il expose trois composants property

xport default {
  setup(props, context) {
    // Attribute ( Objet non réactif )
    console.log(context.attrs)

    // Slots ( Objet non réactif )
    console.log(context.slots)

    // Déclencheur d'événements (Méthodes)
    console.log(context.emit)
  }
}
Copier le Code

context C'est normal. JavaScript Objet,C'est - à - dire,Ce n'est pas réactif., Ça veut dire que tu peux être en sécurité avec  context Utiliser ES6 Déconstruction

export default {
  setup(props, { attrs, slots, emit }) {
    ...
  }
}
Copier le Code

setup Valeur de retour de la fonction

setup Valeur de retour de la fonction —— Objet

Si setup Renvoie un objet, Dans le modèle de composant, vous pouvez passer à  setup De props property Même accès à l'objet property:

<template>
  <!--  L'utilisation dans le modèle est automatiquement déverrouillée ,Donc pas besoin. .value  -->
  <div>{{ readersNumber }} {{ book.title }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    setup() {
      const readersNumber = ref(0)
      const book = reactive({ title: 'Vue 3 Guide' })

      // expose to template
      return {
        readersNumber,
        book
      }
    }
  }
</script>
Copier le Code

Attention!,De setup Retour à refs  Lors de l'accès au modèle Se détacher automatiquement De, Par conséquent, il ne doit pas être utilisé dans le modèle  .value

Système réactif API

1. reactive

reactive() Recevoir un objet normal et retourner un proxy réactif pour cet objet normal .équivalent à 2.x De Vue.observable()

**

const obj = reactive({ count: 0 })
Copier le Code

La conversion réactive est “ Profond ”: Affecte toutes les propriétés imbriquées à l'intérieur de l'objet .Basé sur ES2015 De Proxy Réalisation,Objet proxy retournéPas égal àObjet original. Il est recommandé d'utiliser uniquement des objets proxy sans dépendre de l'objet original .

**

<template>
  <div id="app">{ state.count }</div>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup() {
    // state  C'est un état réactif 
    const state = reactive({
      count: 0,
    })
  }
}
</script>
Copier le Code

2. ref

Accepte une valeur de paramètre et renvoie une réponse modifiable ref Objet.ref L'objet a une seule propriété qui pointe vers une valeur interne .value.

**

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1
Copier le Code

Si ref C'est un objet.,Sera appelé reactive Méthode de transformation de la réponse profonde.

  • Accès dans le modèle

    Quand ref Renvoie comme attribut du contexte de rendu (C'est - à - dire danssetup() Parmi les objets retournés ) Et lorsqu'il est utilisé dans un modèle , Ça se dégonfle automatiquement , Aucune écriture supplémentaire n'est requise dans le modèle .value

    **

    <template>
      <div>{{ count }}</div>
    </template>
    
    <script>
      export default {
        setup() {
          return {
            count: ref(0),
          }
        },
      }
    </script>
    Copier le Code
  • Accès en tant que propriété d'un objet réactif

    Quand ref En tant que reactive Objet property Lors de l'accès ou de la modification , Il sera également automatiquement dégraissé value Valeur, Il se comporte comme un attribut commun :

    **

    const count = ref(0)
    const state = reactive({
      count,
    })
    
    console.log(state.count) // 0
    
    state.count = 1
    console.log(count.value) // 1
    Copier le Code

    Attention si un nouveau ref Attribué à un ref, Remplacer l'ancien ref:

    **

    const otherCount = ref(2)
    
    state.count = otherCount
    console.log(state.count) // 2
    console.log(count.value) // 1
    Copier le Code

    Notez quand imbriqué dans reactive Object Mi - temps,ref C'est pour ça que .De Array Ou Map Accédez à ref Heure, Pas de déverrouillage automatique :

    **

    const arr = reactive([ref(0)])
    // Il faut .value
    console.log(arr[0].value)
    
    const map = reactive(new Map([['foo', ref(0)]]))
    // Il faut .value
    console.log(map.get('foo').value)
    Copier le Code
  • Définition du type

    **

    interface Ref<T> {
      value: T
    }
    
    function ref<T>(value: T): Ref<T>
    Copier le Code

    Parfois, on a besoin de ref Faites une dimension de type plus complexe . On peut appeler ref Passer des paramètres génériques pour outrepasser la dérivation par défaut :

    **

    const foo = ref<string | number>('foo') // foo Type de: Ref<string | number>
    
    foo.value = 123 // Capable de passer à travers!
    Copier le Code

3. computed

Utiliser la réponse computed API Il y a deux façons:

  1. Passer dans un getter Fonctions, Renvoie une valeur par défaut non modifiable manuellement ref Objet.

**

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2

plusOne.value++ // Erreur!
Copier le Code
  1. Passer à un propriétaire get Et set Objet de la fonction , Créer un état de calcul modifiable manuellement .

**

const count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: (val) => {
    count.value = val - 1
  },
})

plusOne.value = 1
console.log(count.value) // 0
Copier le Code
  • Définition du type

    **

    // Lire seulement
    function computed<T>(getter: () => T): Readonly<Ref<Readonly<T>>>
    
    //  Modifiable 
    function computed<T>(options: {
      get: () => T
      set: (value: T) => void
    }): Ref<T>
    Copier le Code

4. readonly

Passer dans un objet( Réactif ou normal )Ou ref, Renvoie un objet original Lire seulementAgents. Un agent en lecture seule est “ Profond ”, Toutes les propriétés imbriquées à l'intérieur de l'objet sont également lues seulement .

**

const original = reactive({ count: 0 })

const copy = readonly(original)

watchEffect(() => {
  //  Suivi des dépendances 
  console.log(copy.count)
})

// original  La modification sur déclenche  copy  Écouter sur 
original.count++

// Impossible de modifier copy  Et sera averti 
copy.count++ // warning!
Copier le Code

5. watchEffect

Exécuter immédiatement une fonction entrante , Et de suivre ses dépendances de façon réactive , Et rediriger la fonction lorsqu'elle dépend d'un changement .

**

const count = ref(0)

watchEffect(() => console.log(count.value))
// -> Imprimer 0

setTimeout(() => {
  count.value++
  // -> Imprimer 1
}, 100)
Copier le Code
  1. Arrêtez d'écouter

Quand watchEffect Dans le composant setup() Lorsque la fonction ou le crochet du cycle de vie est appelé , L'auditeur est lié au cycle de vie du composant , Et s'arrête automatiquement lorsque le composant est déchargé .

Dans certains cas, Vous pouvez également appeler explicitement la valeur de retour pour arrêter d'écouter :

**

const stop = watchEffect(() => {
  /* ... */
})

// Après
stop()
Copier le Code
  1. Élimination des effets secondaires

Parfois, la fonction effets secondaires effectue des effets secondaires asynchrones , Ces réponses doivent être effacées en cas de défaillance ( C'est - à - dire que l'état a changé avant la fin ). Donc la fonction qui écoute les effets secondaires entrants peut recevoir un onInvalidate Fonction comme paramètre d'entrée , Utilisé pour enregistrer les callbacks en cas d'échec du nettoyage . Lorsque les conditions suivantes se produisent ,C'est Échec du rappel Sera déclenché:

  • Lorsque les effets secondaires sont sur le point d'être réappliqués
  • L'auditeur s'est arrêté (Si dans setup() Ou Utilisé dans la fonction de crochet du cycle de vie watchEffect, Lors du déchargement des composants )

**

watchEffect((onInvalidate) => {
  const token = performAsyncOperation(id.value)
  onInvalidate(() => {
    // id Quand ça change Ou  Quand j'ai arrêté d'écouter 
    //  Annuler l'opération asynchrone précédente 
    token.cancel()
  })
})
Copier le Code

La raison pour laquelle nous enregistrons les callbacks invalides en passant une fonction , Au lieu de revenir d'un rappel (Par exemple: React useEffect Dans), Parce que la valeur de retour est importante pour le traitement asynchrone des erreurs .

Lors de l'exécution d'une demande de données , La fonction des effets secondaires est souvent asynchrone :

**

const data = ref(null)
watchEffect(async () => {
  data.value = await fetchData(props.id)
})
Copier le Code

Nous savons que les fonctions asynchrones renvoient implicitement un Promise, Mais la fonction de nettoyage doit être dans Promise Par resolve Précédemment enregistré .En plus,Vue En s'appuyant sur ce retour Promise Pour automatiser Promise Erreurs potentielles dans la chaîne .

  1. Temps de rafraîchissement des effets secondaires

Vue Le système réactif cache la fonction des effets secondaires , Et les rafraîchir asynchrone , Cela évite le même tick Appels répétés inutiles causés par plusieurs changements d'état . Dans la mise en œuvre concrète du noyau , La fonction de mise à jour du composant est également un effet secondaire de l'écoute . Lorsqu'une fonction d'effets secondaires définie par l'utilisateur entre dans la file d'attente , Après toutes les mises à jour des composants :

**

<template>
  <div>{{ count }}</div>
</template>

<script>
  export default {
    setup() {
      const count = ref(0)

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

      return {
        count,
      }
    },
  }
</script>
Copier le Code

Dans ce cas,:

  • count Sera imprimé de façon synchrone à l'exécution initiale
  • Changement count Heure, Sera dans le composant Après mise à jourEffets secondaires.

Votre attention, s'il vous plaît., L'initialisation fonctionne sur le composant mounted Précédemment exécuté .Donc,, Si vous souhaitez accéder à DOM( Ou modèle ref),S'il vous plaît. onMounted Au crochet :

**

onMounted(() => {
  watchEffect(() => {
    //  Ici vous pouvez accéder à  DOM Ou template refs
  })
})
Copier le Code

Si les effets secondaires doivent être synchronisés ou redirigés avant la mise à jour du composant , Nous pouvons transmettre un flush Objet de la propriété en option (Par défaut 'post'):

**

//  Exécution synchrone 
watchEffect(
  () => {
    /* ... */
  },
  {
    flush: 'sync',
  }
)

//  Exécuter avant la mise à jour des composants 
watchEffect(
  () => {
    /* ... */
  },
  {
    flush: 'pre',
  }
)
Copier le Code
  1. Débogage de l'auditeur

onTrack Et onTrigger Options disponibles pour déboguer le comportement d'un auditeur .

  • Quand un reactive Propriété de l'objet ou un ref Quand on est traqué comme une dépendance ,Sera appelé onTrack
  • Lorsque les effets secondaires sont déclenchés par un changement de dépendance ,Sera appelé onTrigger

Les deux callbacks recevront un événement de débogueur contenant des informations sur les dépendances . Il est recommandé d'écrire dans le rappel suivant debugger Déclarations pour vérifier les dépendances :

**

watchEffect(
  () => {
    /*  Contenu des effets secondaires  */
  },
  {
    onTrigger(e) {
      debugger
    },
  }
)
Copier le Code

onTrack Et onTrigger Valable uniquement en mode développement .

  • Définition du type

    **

    function watchEffect(
      effect: (onInvalidate: InvalidateCbRegistrator) => void,
      options?: WatchEffectOptions
    ): StopHandle
    
    interface WatchEffectOptions {
      flush?: 'pre' | 'post' | 'sync'
      onTrack?: (event: DebuggerEvent) => void
      onTrigger?: (event: DebuggerEvent) => void
    }
    
    interface DebuggerEvent {
      effect: ReactiveEffect
      target: any
      type: OperationTypes
      key: string | symbol | undefined
    }
    
    type InvalidateCbRegistrator = (invalidate: () => void) => void
    
    type StopHandle = () => void
    Copier le Code

6. watch

watch API Entièrement équivalent à 2.x this.$watch (Et watch Options correspondantes dans ).watch Besoin d'écouter une source de données spécifique , Et effectuer des effets secondaires dans la fonction de rappel . Par défaut, l'exécution est paresseuse , C'est - à - dire qu'un rappel n'est effectué que lorsque la source à l'écoute change .

  • Comparer watchEffect,watch Laissez - nous :

    • Paresseux pour les effets secondaires ;
    • Plus de clarté sur les changements d'état qui déclenchent les effets secondaires de la redirection de l'auditeur ;
    • Accéder aux valeurs avant et après le changement d'état d'écoute .
  • Écouter une seule source de données

    La source de données de l'auditeur peut être une valeur de retour getter Fonctions,C'est possible. ref:

    **

    //  Écoutez un  getter
    const state = reactive({ count: 0 })
    watch(
      () => state.count,
      (count, prevCount) => {
        /* ... */
      }
    )
    
    //  Écoutez directement un  ref
    const count = ref(0)
    watch(count, (count, prevCount) => {
      /* ... */
    })
    Copier le Code
  • Écouter plusieurs sources de données

    watcher Vous pouvez également utiliser un tableau pour écouter plusieurs sources en même temps :

    **

    watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
      /* ... */
    })
    Copier le Code
  • Avec watchEffect Comportement partagé

    watch Et watchEffect In Arrêtez d'écouter , Élimination des effets secondaires (En conséquence onInvalidate Passe comme troisième paramètre du rappel ), Temps de rafraîchissement des effets secondaires Et Débogage de l'auditeur Comportement cohérent dans des domaines tels que .

  • Définition du type

    **

    //  Écouter une seule source de données 
    function watch<T>(
      source: WatcherSource<T>,
      callback: (
        value: T,
        oldValue: T,
        onInvalidate: InvalidateCbRegistrator
      ) => void,
      options?: WatchOptions
    ): StopHandle
    
    //  Écouter plusieurs sources de données 
    function watch<T extends WatcherSource<unknown>[]>(
      sources: T
      callback: (
        values: MapSources<T>,
        oldValues: MapSources<T>,
        onInvalidate: InvalidateCbRegistrator
      ) => void,
      options? : WatchOptions
    ): StopHandle
    
    type WatcherSource<T> = Ref<T> | (() => T)
    
    type MapSources<T> = {
      [K in keyof T]: T[K] extends WatcherSource<infer V> ? V : never
    }
    
    //  Propriétés communes  Veuillez vérifier `watchEffect` Définition de type pour
    interface WatchOptions extends WatchEffectOptions {
      immediate?: boolean // default: false
      deep?: boolean
    }
    Copier le Code

版权声明
本文为[Un lion de siège désireux de changer le monde]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/09/20210914170046008Y.html

Scroll to Top