API réactive : cœur

API réactive : cœur

1. réf()

Prend une valeur interne et renvoie un objet ref réactif et modifiable avec une seule propriété pointant vers sa valeur interne .value.

• taper

  function ref<T>(value: T): Ref<UnwrapRef<T>>
  
  interface Ref<T> {
        
        
    value: T
  }
  

• détails

  L'objet ref est modifiable, ce qui signifie que vous pouvez .valuelui attribuer de nouvelles valeurs. Il est également réactif, c'est-à-dire que toutes .valueles opérations sur seront suivies et que les écritures déclencheront les effets secondaires qui leur sont associés.

  Si un objet est assigné à ref, alors cet objet sera converti en un objet avec une réactivité profonde via reactive() . Cela signifie également que si l'objet contient des références imbriquées, elles seront profondément déballées.

  Pour éviter cette conversion profonde, utilisez shallowRef()plutôt.

• exemple

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

Deux, réactif ()

Renvoie un proxy réactif pour un objet .

• taper

  function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
  

• détails

  Une transformation réactive est « profonde » : elle affecte toutes les propriétés imbriquées. Un objet réactif déballera également en profondeur toutes les propriétés ref tout en restant réactif.

  Il convient de noter que lors de l'accès à un élément ref dans un tableau réactif ou Mapun tel type de collection natif, aucun déballage ref ne sera effectué.

  Pour éviter les transitions réactives profondes et ne vouloir préserver que la réactivité de l'accès de niveau supérieur à cet objet, utilisez à la place la fonction WishWoepReactive() .

  L'objet renvoyé et ses objets imbriqués seront enveloppés par ES Proxy , il n'est donc pas égal à l'objet source. Il est recommandé de n'utiliser que des proxys réactifs et d'éviter d'utiliser des objets d'origine.

• exemple

  Créez un objet réactif :

  const obj = reactive({
        
         count: 0 })
  obj.count++
  

  Déballage de la réf :

  const count = ref(1)
  const obj = reactive({
        
         count })
  
  // ref 会被解包
  console.log(obj.count === count.value) // true
  
  // 会更新 `obj.count`
  count.value++
  console.log(count.value) // 2
  console.log(obj.count) // 2
  
  // 也会更新 `count` ref
  obj.count++
  console.log(obj.count) // 3
  console.log(count.value) // 3
  

  Notez que lors de l'accès à un élément ref dans un tableau réactif ou Mapun type de collection natif, aucun déballage ref n'est effectué :

  const books = reactive([ref('Vue 3 Guide')])
  // 这里需要 .value
  console.log(books[0].value)
  
  const map = reactive(new Map([['count', ref(0)]]))
  // 这里需要 .value
  console.log(map.get('count').value)
  

  Lors de l'attribution d'une référence à une reactivepropriété, la référence sera automatiquement déroulée :

  const count = ref(1)
  const obj = reactive({
        
        })
  
  obj.count = count
  
  console.log(obj.count) // 1
  console.log(obj.count === count.value) // true
  

Trois, calculé ()

Prend une fonction getter et renvoie un objet ref réactif en lecture seule . La référence .valueexpose la valeur de retour de la fonction getter via . Il peut également accepter un objet avec des fonctions getet setpour créer un objet ref accessible en écriture.

• taper

  // 只读
  function computed<T>(
    getter: () => T,
    // 查看下方的 "计算属性调试" 链接
    debuggerOptions?: DebuggerOptions
  ): Readonly<Ref<Readonly<T>>>
  
  // 可写的
  function computed<T>(
    options: {
        
        
      get: () => T
      set: (value: T) => void
    },
    debuggerOptions?: DebuggerOptions
  ): Ref<T>
  

• exemple

  Créez une référence de propriété calculée en lecture seule :

  const count = ref(1)
  const plusOne = computed(() => count.value + 1)
  
  console.log(plusOne.value) // 2
  
  plusOne.value++ // 错误
  

  Créez une propriété calculée inscriptible ref :

  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
  

  débogage :

  const plusOne = computed(() => count.value + 1, {
    onTrack(e) {
      debugger
    },
    onTrigger(e) {
      debugger
    }
  })
  

4. lecture seule()

Prend un objet (qu'il soit réactif ou brut) ou une référence et renvoie un proxy en lecture seule de la valeur d'origine.

• taper

  function readonly<T extends object>(
    target: T
  ): DeepReadonly<UnwrapNestedRefs<T>>
  

• détails

  Les proxys en lecture seule sont profonds : l'accès à toutes les propriétés imbriquées sera en lecture seule. Son comportement de déballage ref est reactive()le même que , mais la valeur déballée est en lecture seule.

  Pour éviter un comportement de conversion en profondeur, utilisez à la place une fonction peu profondeReadonly() .

• exemple

  const original = reactive({
        
         count: 0 })
  
  const copy = readonly(original)
  
  watchEffect(() => {
        
        
    // 用来做响应性追踪
    console.log(copy.count)
  })
  
  // 更改源属性会触发其依赖的侦听器
  original.count++
  
  // 更改该只读副本将会失败，并会得到一个警告
  copy.count++ // warning!
  

Cinq, watchEffet ()

Exécutez une fonction immédiatement tout en suivant de manière réactive ses dépendances et en les réexécutant lorsque les dépendances changent.

• taper

  function watchEffect(
    effect: (onCleanup: OnCleanup) => void,
    options?: WatchEffectOptions
  ): StopHandle
  
  type OnCleanup = (cleanupFn: () => void) => void
  
  interface WatchEffectOptions {
        
        
    flush?: 'pre' | 'post' | 'sync' // default: 'pre'
    onTrack?: (event: DebuggerEvent) => void
    onTrigger?: (event: DebuggerEvent) => void
  }
  
  type StopHandle = () => void
  

• détails

  Le premier argument est la fonction d'effet secondaire à exécuter. Le paramètre de cette fonction d'effet secondaire est également une fonction, qui est utilisée pour enregistrer le rappel de nettoyage. Le rappel de nettoyage sera appelé avant la prochaine exécution de l'effet secondaire et peut être utilisé pour nettoyer les effets secondaires non valides, tels que les demandes asynchrones en attente (voir l'exemple ci-dessous).

  Le deuxième paramètre est une option facultative qui peut être utilisée pour ajuster la synchronisation de l'effet secondaire ou déboguer la dépendance de l'effet secondaire.

  La valeur de retour est une fonction utilisée pour arrêter l'effet secondaire.

• exemple

  const count = ref(0)
  
  watchEffect(() => console.log(count.value))
  // -> 输出 0
  
  count.value++
  // -> 输出 1
  

  Effets secondaires éliminés :

  watchEffect(async (onCleanup) => {
        
        
    const {
        
         response, cancel } = doAsyncWork(id.value)
    // `cancel` 会在 `id` 更改时调用
    // 以便取消之前
    // 未完成的请求
    onCleanup(cancel)
    data.value = await response
  })
  

  Arrêtez l'écouteur :

  const stop = watchEffect(() => {
        
        })
  
  // 当不再需要此侦听器时:
  stop()
  

  choix :

  watchEffect(() => {
        
        }, {
        
        
    flush: 'post',
    onTrack(e) {
        
        
      debugger
    },
    onTrigger(e) {
        
        
      debugger
    }
  })
  

6. regarderPostEffet()

watchEffect()flush: 'post'Alias ​​​​lors de l'utilisation de l'option.

七、watchSyncEffect()

watchEffect()flush: 'sync'Alias ​​​​lors de l'utilisation de l'option.

Huit, regarde ()

Écoute une ou plusieurs sources de données réactives et appelle la fonction de rappel donnée lorsque la source de données change.

• taper

  // 侦听单个来源
  function watch<T>(
    source: WatchSource<T>,
    callback: WatchCallback<T>,
    options?: WatchOptions
  ): StopHandle
  
  // 侦听多个来源
  function watch<T>(
    sources: WatchSource<T>[],
    callback: WatchCallback<T[]>,
    options?: WatchOptions
  ): StopHandle
  
  type WatchCallback<T> = (
    value: T,
    oldValue: T,
    onCleanup: (cleanupFn: () => void) => void
  ) => void
  
  type WatchSource<T> =
    | Ref<T> // ref
    | (() => T) // getter
    | T extends object
    ? T
    : never // 响应式对象
  
  interface WatchOptions extends WatchEffectOptions {
        
        
    immediate?: boolean // 默认：false
    deep?: boolean // 默认：false
    flush?: 'pre' | 'post' | 'sync' // 默认：'pre'
    onTrack?: (event: DebuggerEvent) => void
    onTrigger?: (event: DebuggerEvent) => void
  }
  

  Les types sont simplifiés pour plus de lisibilité.

• détails

  watch()La valeur par défaut est l'écoute différée, c'est-à-dire que la fonction de rappel n'est exécutée que lorsque la source d'écoute change.

  Le premier paramètre est la source de l'écouteur . Cette source peut être l'une des suivantes :

  • une fonction qui renvoie une valeur
  • une réf
  • un objet réactif
  • ... ou un tableau de valeurs des types ci-dessus

  Le deuxième paramètre est une fonction de rappel à appeler lorsqu'un changement se produit. Cette fonction de rappel prend trois arguments : la nouvelle valeur, l'ancienne valeur et une fonction de rappel pour enregistrer le nettoyage des effets secondaires. Cette fonction de rappel sera appelée avant que l'effet secondaire ne soit réexécuté la prochaine fois et peut être utilisée pour effacer les effets secondaires non valides, tels que les demandes asynchrones en attente.

  Lors de l'écoute de plusieurs sources, la fonction de rappel accepte deux tableaux, un pour la nouvelle valeur et un pour l'ancienne valeur dans le tableau source.

  Le troisième argument facultatif est un objet qui prend en charge les options suivantes :

  • immediate: Le rappel est déclenché immédiatement lorsque l'écouteur est créé. L'ancienne valeur est lors du premier appel undefined.
  • deep : si la source est un objet, force un parcours profond afin que les rappels soient déclenchés lors de changements de niveau profonds. Voir la section Écouteurs profonds .
  • flush: Ajustez la synchronisation de rafraîchissement de la fonction de rappel. Reportez-vous à la section sur la fréquence d'actualisation des rappels .
  • onTrack / onTrigger: Dépendance de l'écouteur de débogage. Voir la section sur le débogage des écouteurs .

  watchEffect()Par rapport à watch()nous permet de :

  • exécuter paresseusement les effets secondaires;
  • Il est plus clair quel état doit déclencher la ré-exécution de l'écouteur ;
  • Peut accéder aux valeurs précédentes et actuelles de l'état écouté.

• exemple

  Écoutez une fonction getter :

  const state = reactive({ count: 0 })
  watch(
    () => state.count,
    (count, prevCount) => {
      /* ... */
    }
  )
  

  Écoutez une réf :

  const count = ref(0)
  watch(count, (count, prevCount) => {
    /* ... */
  })
  

  Lors de l'écoute de plusieurs sources, la fonction de rappel accepte deux tableaux, correspondant aux nouvelles et anciennes valeurs du tableau source :

  watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
    /* ... */
  })
  

  Lors de l'utilisation d'une fonction getter comme source, le rappel ne se déclenche que lorsque la valeur de retour de la fonction change. Si vous voulez que le rappel se déclenche même lors de changements profonds, vous devez utiliser { deep: true }forcer l'écouteur en mode profond. En mode profond, si la fonction de rappel est déclenchée en raison d'un changement profond, la nouvelle valeur et l'ancienne valeur seront le même objet.

  const state = reactive({ count: 0 })
  watch(
    () => state,
    (newValue, oldValue) => {
      // newValue === oldValue
    },
    { deep: true }
  )
  

  Lors de l'écoute directe d'un objet réactif, l'écouteur active automatiquement le mode profond :

  const state = reactive({ count: 0 })
  watch(state, () => {
    /* 深层级变更状态所触发的回调 */
  })
  

  watch()watchEffect()Possède les mêmes options de synchronisation et de débogage d'actualisation que :

  watch(source, callback, {
    flush: 'post',
    onTrack(e) {
      debugger
    }
  })