Die Rolle von Onmount in Vue

onMounted ist ein Lebenszyklus-Hook für die Komponentenmontage in Vue. Seine Funktion besteht darin, Initialisierungsvorgänge durchzuführen, nachdem die Komponente im DOM bereitgestellt wurde, z. B. das Abrufen von Referenzen auf DOM-Elemente, das Festlegen von Daten, das Senden von HTTP-Anforderungen, das Registrieren von Ereignis-Listenern usw. Es wird nur einmal aufgerufen, wenn die Komponente gemountet wird. Wenn Sie Vorgänge ausführen müssen, nachdem die Komponente aktualisiert wurde oder bevor sie zerstört wurde, können Sie andere Lebenszyklus-Hooks verwenden.

Die Rolle von onMounted in Vue

onMounted ist einer der Vue-Lebenszyklus-Hooks, was bedeutet, dass er aufgerufen wird, nachdem die Komponente im DOM gemountet wurde. Seine Hauptfunktion ist:

Vorgänge im Zusammenhang mit der Komponentenmontage ausführen

Nachdem die Komponente im DOM gemountet wurde, können Sie einige Initialisierungsvorgänge ausführen, wie zum Beispiel:

• Die Referenz des DOM-Elements abrufen
• Daten festlegen oder Attribute
• HTTP-Anfrage senden
• Ereignis-Listener registrieren

Vollständige Datenanforderung oder asynchroner Vorgang

Wenn Sie Daten abrufen oder Vorgänge ausführen müssen, die nach dem Mounten der Komponente einige Zeit in Anspruch nehmen, können Sie dies im onMounted tun Haken. Dadurch wird sichergestellt, dass die Komponente entsprechend reagiert, wenn die Daten oder der Vorgang abgeschlossen sind.

Zum Beispiel:

<code class="javascript"><script>
import { onMounted } from 'vue'

export default {
  onMounted() {
    // 获取 DOM 元素的引用
    const el = this.$refs.myElement

    // 设置数据
    this.data = 'Hello world!'

    // 发送 HTTP 请求
    fetch('https://example.com/api/data').then((response) => {
      this.data = response.data
    })

    // 注册事件监听器
    window.addEventListener('resize', this.onResize)
  },
  methods: {
    onResize() {
      // 窗口大小改变时响应
    }
  }
}
</script></code>

Hinweis:

• onMounted-Hook wird nur einmal aufgerufen, wenn die Komponente montiert ist.
• Wenn Sie nach der Aktualisierung der Komponente einen Vorgang ausführen müssen, können Sie den onUpdated-Hook verwenden.
• Wenn Sie Bereinigungsvorgänge durchführen müssen, bevor die Komponente zerstört wird, können Sie den onBeforeUnmount-Hook verwenden.

Das obige ist der detaillierte Inhalt vonDie Rolle von Onmount in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!