Comment les données vue3 surveillent watch/watchEffect

Nous savons tous que le rôle de l'auditeur est de déclencher à chaque fois que l'état réactif change Dans l'API combinée, nous pouvons utiliser la fonction watch() et la fonction watchEffect(),

lorsque vous changez. Avec un état réactif, il peut déclencher à la fois des mises à jour des composants Vue et des rappels d'écouteur.

Par défaut, les rappels d'écoute créés par l'utilisateur seront appelés avant la mise à jour des composants Vue. Cela signifie que le DOM auquel vous accédez dans le rappel de l'écouteur sera l'état dans lequel il se trouvait avant sa mise à jour par Vue.

Alors, voyons, comment pouvons-nous en faire bon usage ? Quelle est la différence entre eux ? La fonction

watch()

watch a besoin d'écouter une source de données spécifique, comme l'écoute d'une ref. Le premier paramètre de watch peut être une "source de données" sous différentes formes : il peut s'agir d'une ref (. y compris les propriétés calculées), un objet réactif, une fonction getter ou un tableau de plusieurs sources de données, comme suit :

const x = ref(0)
const y = ref(0)

// 单个 ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

// getter 函数
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)



// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})


const obj = reactive({ count: 0 })
//传入一个响应式对象
watch(obj, (newValue, oldValue) => {
  // 在嵌套的属性变更时触发
  // 注意：`newValue` 此处和 `oldValue` 是相等的
  // 因为它们是同一个对象！
})

obj.count++


watch(
  () => obj.count,
  (newValue, oldValue) => {
    // 注意：`newValue` 此处和 `oldValue` 是相等的
    // *除非* obj.count 被整个替换了
  },
  { deep: true }
)

Notez que vous ne pouvez pas écouter directement la valeur de propriété d'un objet réactif

const obj = reactive({ count: 0 })

// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

ici Vous devez utiliser une getter function qui renvoie cette propriété :

// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  }
)

watch est par défaut : le rappel ne sera exécuté que lorsque la source de données change. Mais dans certains scénarios, nous souhaitons exécuter le rappel immédiatement lors de la création de l'écouteur. Par exemple, nous souhaitons demander des données initiales, puis demander à nouveau les données lorsque l'état concerné change.

Nous pouvons forcer le rappel de l'auditeur à s'exécuter immédiatement en passant l'option immediate: true :

watch(source, (newValue, oldValue) => {
  // 立即执行，且当 `source` 改变时再次执行
}, { immediate: true })

watchEffect() fonction

watchEffect() nous permet de suivre automatiquement les dépendances réactives du rappel.

const todoId = ref(1)
const data = ref(null)

watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
})

Dans cet exemple, le rappel sera exécuté immédiatement, il n'est pas nécessaire de préciser immédiat : vrai. Pendant l'exécution, il suit automatiquement todoId.value en tant que dépendance (similaire à une propriété calculée). Chaque fois que todoId.value change, le rappel sera à nouveau exécuté. Avec watchEffect(), nous n'avons plus besoin de transmettre explicitement todoId comme valeur source .

watchEffect() convient aux auditeurs avec plusieurs dépendances. Pour cet exemple avec une seule dépendance, l'avantage est relativement faible. De plus, si vous devez écouter plusieurs propriétés dans une structure de données imbriquée, watchEffect() peut être plus efficace qu'un écouteur approfondi, car il suivra uniquement les propriétés utilisées dans le rappel, plutôt que de suivre de manière récursive toutes les propriétés.

Si vous souhaitez accéder au DOM mis à jour par Vue dans le rappel de l'auditeur, vous devez spécifier l'option flush: ‘post’,
post-flush watchEffect() a un alias plus pratique watchPostEffect() :

import { watchPostEffect } from 'vue'

watchPostEffect(() => {
  /* 在 Vue 更新后执行 */
})

La connexion et la différence entre watch et watchEffect

watch et watchEffect peuvent exécuter des rappels avec des effets secondaires de manière réactive. La principale différence entre eux réside dans la façon dont suivi des dépendances réactives :

regarde uniquement les pistes sources de données qui sont explicitement écoutées. Il ne suivra rien de ce qui est accessible lors du rappel. De plus, le rappel n'est déclenché que lorsque la source de données change réellement. watch évitera de suivre les dépendances lorsque des effets secondaires se produisent, afin que nous puissions contrôler plus précisément le moment où la fonction de rappel est déclenchée.

watchEffect suivra les dépendances lors de l'apparition d'effets secondaires. Il suivra automatiquement toutes les propriétés réactives accessibles pendant la synchronisation. C'est plus pratique et le code a tendance à être plus propre, mais parfois ses dépendances réactives sont moins explicites. Convient aux auditeurs ayant plusieurs dépendances

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!