Vue 3 tri des documents démarrage rapide

vue tri des documents marrage


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://qdmana.com/2021/09/20210914170046008Y.html

  1. Non-ASCII character ‘\xe5‘ in file kf1.py on line 4, but no encoding declared; see http://python.or
  2. 手把手教你搭建微信小程序服务器(HTTPS)
  3. sqli-labs-less-18 http头user agent+报错注入
  4. Génération de code nest pour l'outil CLI de nestjs
  5. JS | This
  6. Augmentation des variables
  7. The sinking gs8 raises its flag again. GAC motor's sales are falling endlessly. Is it the car or the people?
  8. Ren Hao's lunch at work today is president Hao wearing a sleeveless coat! Clean and handsome!
  9. Summary of basic knowledge points of JavaScript language (mind map)
  10. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  11. Sqli Labs - less - 18 http header user agent + Error Reporting Injection
  12. Vous apprendrez à construire un serveur d'applet Wechat (https) à la main
  13. Non - ASCII character 'xe5' in file kf1.py on Line 4, but no Encoding declared;Voirhttp://python.or
  14. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  15. En tant que programmeur, quelle est la plus grande tristesse que vous ressentez? L'entrevue d'emploi Java de 2021 dans une grande usine vous demandera:
  16. En tant que programmeur, je n'oublie pas le dernier résumé de mon expérience d'entrevue de stage en Java.
  17. Experts suggested that performers work with certificates, which triggered a collective heated debate. It is meaningless to be accused of repeating the mistakes
  18. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  19. The appearance value of 200000 "Odyssey" is less than 100000, and has become the "sales champion" of household MPV
  20. Les programmeurs Java qui sont entrés dans l'entreprise pendant trois mois ont dû faire face à une correction d'échelle, et les octets ont sauté dans le traitement des questions d'entrevue de JD 360 Netease.
  21. 350 questions d'entrevue Android partage, technologie d'architecture de cache
  22. The space is not vulgar, the configuration is rich, the leather is durable, less worry, and the high configuration is less than 100000!
  23. Vous permet de passer rapidement à travers l'entrevue de saut d'octets et d'aller de l'avant
  24. Résumé des questions d'entrevue technique d'Alibaba Baidu et d'autres grandes usines à la fin de l'année, et analyse de la dernière vraie question d'entrevue Android en 2021
  25. Avec cet ensemble de questions d'entrevue Java, l'ensemble de questions de base d'entrevue de bat,
  26. Avec cet ensemble de questions d'entrevue Java, les notes avancées Java de niveau divin sont systématisées,
  27. Opérateurs arithmétiques et opérateurs de comparaison pour JavaScript, Introduction classique au développement web
  28. Explorer le cadre open source Android - 1. Okhttp Source Analysis
  29. Module management of "free and open source" front-end spa project crudapi background management system based on Vue and Quasar (14)
  30. Partager l'expérience de l'examen et du développement de l'arrière - plan, en s'appuyant sur les questions d'entrevue et les réponses,
  31. Site Web pour partager vos expériences d'entrevue, Tencent Bull vous apprend à écrire votre propre cadre Java!
  32. Notes d'étape Android structurées, sélection de vrais problèmes d'entrevue Android
  33. Dictionnaire distribué: communication de cache limitée par le courant, sujets d'entrevue pour certaines questions courantes dans le développement Java,
  34. Tianci girlfriend Tangyuan attended the event for the second time. Her appearance was comparable to that of a star. The audience shouted that Tianci was blessed!
  35. Introduction au JavaScript chapitre 15 (objets, clairvoyance)
  36. La dernière revue scientifique de l'académicien Luo Liqun: architecture de la boucle neuronale pour stimuler la nouvelle Ia
  37. Basic knowledge of components in Vue "I"
  38. J'a i appris quelques petites choses sur l'entrevue et j'ai acheté un tutoriel en 19998.
  39. Dix minutes pour vous faire passer en revue les points de connaissance que Spring demande souvent, le chemin du retour Jedi d'un programmeur âgé de 35 ans,
  40. Want to know the implementation and application of single instance mode in the front end?
  41. Progressive react source code analysis - Implementation of ref API
  42. Webpack5 learning -- code compression
  43. Front and back end data interaction (V) -- what is Axios?
  44. Knowledge points related to react routing
  45. On demand introduction of react antd + customized theme
  46. GPG management submission signature verification
  47. [babylonjs] babylonjs practice (XII) -- drawing lane lines
  48. After brushing the 12 sliding windows, you can tear the front end by hand
  49. Vue fruit bookkeeping - money.vue component
  50. Propriétés et méthodes des objets Array en javascript!,Pseudo - classes et pseudo - éléments pour CSS
  51. JS contains the function code
  52. Typescript record (I)
  53. Take you to learn more about nginx basic login authentication: generating passwords using OpenSSL
  54. Is componentization obsolete? Introduction to micro front end architecture
  55. Leetcode day 18
  56. Simple code to achieve a, 1W + people see the Mid Autumn Festival blessing
  57. Design pattern -- agent pattern
  58. Vs Code theme recommendation in 2021
  59. Mon expérience réelle dans l'externalisation Android à Huawei, préparation de l'entrevue de développement Android
  60. J'ai les questions et les réponses d'entrevue de développement d'octets de rêve et Tencent double offer, Android