Wie vue3-Daten watch/watchEffect überwachen

Wir alle wissen, dass die Rolle des Listeners darin besteht, jedes Mal auszulösen, wenn sich der reaktive Zustand ändert. In der kombinierten API können wir die Funktionen watch() und watchEffect() verwenden,wenn Sie sich ändern Im reaktiven Zustand kann es sowohl Vue-Komponentenaktualisierungen als auch Listener-Rückrufe auslösen.

Standardmäßig werden vom Benutzer erstellte Listener-Rückrufe aufgerufen, bevor Vue-Komponenten aktualisiert werden. Das bedeutet, dass das DOM, auf das Sie im Listener-Callback zugreifen, den Zustand hat, in dem es sich vor der Aktualisierung durch Vue befand.

Also schauen wir mal, wie können wir sie sinnvoll nutzen? Was ist der Unterschied zwischen ihnen? Die

watch()-Funktion

watch muss auf eine bestimmte Datenquelle hören, beispielsweise auf eine Referenz. Der erste Parameter von watch kann eine „Datenquelle“ in verschiedenen Formen sein: Es kann eine

ref

sein. einschließlich berechneter Eigenschaften), ein reaktives Objekt, eine Getter-Funktion oder ein Array mehrerer Datenquellen, wie folgt:

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 }
)

Beachten Sie, dass Sie den Eigenschaftswert eines reaktiven Objekts nicht direkt abhören können

const obj = reactive({ count: 0 })

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

hier müssen Sie eine

Getter-Funktion

verwenden, die diese Eigenschaft zurückgibt:

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

watch ist standardmäßig faul: Der Rückruf wird nur ausgeführt, wenn sich die Datenquelle ändert. In einigen Szenarien möchten wir den Rückruf jedoch sofort beim Erstellen des Listeners ausführen. Beispielsweise möchten wir einige Anfangsdaten anfordern und die Daten dann erneut anfordern, wenn sich der relevante Status ändert.

Wir können die sofortige Ausführung des Rückrufs des Listeners erzwingen, indem wir die Option

immediate: true

übergeben:

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

watchEffect()-Funktion

watchEffect() ermöglicht es uns

,

reaktive Abhängigkeiten des Rückrufs automatisch zu verfolgen.

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()
})

In diesem Beispiel wird der Rückruf sofort ausgeführt,

es ist nicht erforderlich, „immediate: true“ anzugeben

. Während der Ausführung wird todoId.value automatisch als Abhängigkeit verfolgt (ähnlich einer berechneten Eigenschaft). Immer wenn sich todoId.value ändert, wird der Rückruf erneut ausgeführt. Mit watchEffect() müssen wir todoId nicht mehr explizit als Quellwert übergeben . watchEffect() eignet sich für Listener mit mehreren Abhängigkeiten. Bei diesem Beispiel mit nur einer Abhängigkeit ist der Nutzen relativ gering. Wenn Sie außerdem mehrere Eigenschaften in einer verschachtelten Datenstruktur abhören müssen, ist watchEffect() möglicherweise effizienter als ein tiefer Listener, da es nur die Eigenschaften verfolgt, die im Rückruf verwendet werden, anstatt alle Eigenschaften rekursiv zu verfolgen.

Wenn Sie im Listener-Callback auf das von Vue aktualisierte DOM zugreifen möchten, müssen Sie die Option

flush: ‘post’

angeben.

post-flush watchEffect() hat einen bequemeren Alias ​​watchPostEffect():

import { watchPostEffect } from 'vue'

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

Der Zusammenhang und der Unterschied zwischen watch und watchEffect

Sowohl watch als auch watchEffect können Rückrufe mit Nebenwirkungen reaktionsschnell ausführen. Der Hauptunterschied zwischen ihnen besteht in der Art und Weise, wie

reaktive Abhängigkeiten verfolgt werden:

Beobachten Sie nur Datenquellen, die explizit abgehört werden. Es wird nichts verfolgt, was im Rückruf aufgerufen wird. Darüber hinaus

wird der Rückruf nur dann ausgelöst

, wenn sich die Datenquelle tatsächlich ändert. watch vermeidet Tracking-Abhängigkeiten, wenn Nebenwirkungen auftreten, sodass wir genauer steuern können, wann die Rückruffunktion ausgelöst wird. watchEffect verfolgt Abhängigkeiten beim Auftreten von Nebenwirkungen. Während der Synchronisierung werden automatisch alle zugänglichen reaktiven Eigenschaften verfolgt. Dies ist bequemer und der Code ist tendenziell sauberer, aber manchmal sind seine reaktiven Abhängigkeiten weniger explizit. Geeignet für Hörer mit mehreren Abhängigkeiten

Das obige ist der detaillierte Inhalt vonWie vue3-Daten watch/watchEffect überwachen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!