Detaillierte Erläuterung der Lebenszyklus-Hook-Funktion in Vue3: Umfassende Beherrschung der Anwendung des Vue3-Lebenszyklus

Detaillierte Erklärung der Life-Cycle-Hook-Funktion in Vue3: Umfassende Beherrschung der Vue3-Life-Cycle-Anwendungen

Vue hat als beliebtes JavaScript-Framework schon immer große Aufmerksamkeit und Liebe gefunden. Mit der Veröffentlichung von Vue3 wurden auch einige Änderungen und Optimierungen an der Life-Cycle-Hook-Funktion vorgenommen. Für Front-End-Entwickler ist es sehr wichtig, die Lebenszyklus-Hook-Funktion von Vue3 zu verstehen. In diesem Artikel werden die Lebenszyklus-Hook-Funktion und ihre Anwendung in Vue3 ausführlich vorgestellt.

Die Lebenszyklus-Hook-Funktion in Vue3

Die Lebenszyklus-Hook-Funktion in Vue3 ist ebenfalls in vier Phasen unterteilt: Erstellung, Bereitstellung, Aktualisierung und Zerstörung. Im Folgenden stellen wir die Lebenszyklus-Hook-Funktionen dieser vier Phasen in Vue3 und deren Verwendung im Detail vor.

Erstellungsphase

In der Erstellungsphase stellt Vue3 zwei Lebenszyklus-Hook-Funktionen bereit: setup() und onBeforeMount(). setup()和onBeforeMount()。

setup()

setup()是Vue3引入的新的生命周期钩子函数，在Vue3中代码中必须要有这个函数，setup()函数会在组件初始化的时候执行，其主要目的是用于设置组件的数据和方法等。

setup()函数的使用方式与Vue2.x中的data和methods类似，我们可以在setup()函数中声明组件需要使用的数据和方法，如下所示：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  setup() {
    const message = 'Hello, Vue3!'
    return {
      message
    }
  }
}
</script>

上面的例子中，我们使用了const关键字声明了一个名为message的变量，该变量的值为'Hello, Vue3!'，然后将其返回，在模板中使用{{ message }}就可以渲染出文本内容。

onBeforeMount()

onBeforeMount()生命周期钩子函数与Vue2.x中的beforeMount()类似，表示组件在挂载到DOM之前的事件，它会在setup()函数执行之后执行。

下面是一个使用onBeforeMount()的例子：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  setup() {
    const message = 'Hello, Vue3!'
    return {
      message
    }
  },
  onBeforeMount() {
    console.log('组件挂载前执行')
  }
}
</script>

上面的例子中，onBeforeMount()函数会在组件模板挂载到DOM之前执行，在控制台输出 组件挂载前执行。

挂载阶段

在挂载阶段中，Vue3提供了两个生命周期钩子函数：onMounted()和onBeforeUpdate()。

onMounted()

onMounted()与Vue2.x中的mounted()类似，表示组件挂载到DOM后的事件，它会在setup()函数执行之后执行。

下面是一个使用onMounted()的例子：

<template>
  <div ref="box">{{ message }}</div>
</template>

<script>
import { onMounted, ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    onMounted(() => {
      console.log('组件已经挂载到DOM上')
      console.log(this.$refs.box)
    })

    return {
      message
    }
  }
}
</script>

上面的例子中，我们使用ref函数创建了一个message变量，并在模板中使用{{ message }}渲染出文本，然后使用onMounted()函数，在组件挂载之后输出 组件已经挂载到DOM上，以及组件中的div元素的引用。

onBeforeUpdate()

onBeforeUpdate()与Vue2.x中的beforeUpdate()类似，表示组件在更新之前的事件，它会在组件的状态发生改变之后、视图开始重新渲染之前执行。

下面是一个使用onBeforeUpdate()的例子：

<template>
  <div>{{ message }}</div>
  <button @click="changeMessage">修改消息</button>
</template>

<script>
import { onBeforeUpdate, ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    const changeMessage = () => {
      message.value = 'Hello, World!'
    }

    onBeforeUpdate(() => {
      console.log('组件即将更新，当前消息为：' + message.value)
    })

    return {
      message,
      changeMessage
    }
  }
}
</script>

上面的例子中，我们使用ref函数创建了一个message变量，并在模板中使用{{ message }}渲染出文本，然后使用onBeforeUpdate()函数，在组件更新之前输出当前消息的值。

更新阶段

在更新阶段中，Vue3提供了两个生命周期钩子函数：onUpdated()和onDeactivated()。

onUpdated()

onUpdated()与Vue2.x中的updated()类似，表示组件在更新之后的事件，它会在组件的状态发生改变之后、视图重新渲染之后执行。

下面是一个使用onUpdated()的例子：

<template>
  <div>{{ message }}</div>
  <button @click="changeMessage">修改消息</button>
</template>

<script>
import { onUpdated, ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    const changeMessage = () => {
      message.value = 'Hello, World!'
    }

    onUpdated(() => {
      console.log('组件已更新，当前消息为：' + message.value)
    })

    return {
      message,
      changeMessage
    }
  }
}
</script>

上面的例子中，我们使用ref函数创建了一个message变量，并在模板中使用{{ message }}渲染出文本，然后使用onUpdated()函数，在组件更新之后输出当前消息的值。

onDeactivated()

onDeactivated()与Vue2.x中的deactivated()类似，表示组件被激活后的事件，它会在组件从激活状态切换到非激活状态时执行。

下面是一个使用onDeactivated()的例子：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { onDeactivated, ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    onDeactivated(() => {
      console.log('组件被激活')
    })

    return {
      message
    }
  }
}
</script>

上面的例子中，我们使用ref函数创建了一个message变量，并在模板中使用{{ message }}渲染出文本，然后使用onDeactivated()函数，在组件被激活时输出 组件被激活。

销毁阶段

在销毁阶段中，Vue3提供了一个生命周期钩子函数：onUnmounted()。

onUnmounted()

setup()🎜🎜setup() ist eine neue Lebenszyklus-Hook-Funktion, die von Vue3 eingeführt wurde. Diese Funktion muss im Code in Vue3, setup, enthalten sein Die Funktion () wird ausgeführt, wenn die Komponente initialisiert wird. Ihr Hauptzweck besteht darin, die Daten und Methoden der Komponente festzulegen. 🎜🎜Die Verwendung der Funktion setup() ähnelt den Funktionen data und methods in Vue2.x. Wir können setup() verwenden. Deklarieren Sie die Daten und Methoden, die die Komponente in der Funktion verwenden muss, wie unten gezeigt: 🎜

<template>
  <div>{{ message }}</div>
</template>

<script>
import { onUnmounted, ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    onUnmounted(() => {
      console.log('组件被销毁')
    })

    return {
      message
    }
  }
}
</script>

🎜Im obigen Beispiel haben wir das Schlüsselwort const verwendet, um eine Datei mit dem Namen message Variable, der Wert dieser Variablen ist <code>'Hello, Vue3!', und geben Sie ihn dann zurück, verwenden Sie {{ message }} in der Vorlage Rendern Sie den Textinhalt. 🎜🎜onBeforeMount()🎜🎜onBeforeMount()Die Lebenszyklus-Hook-Funktion ähnelt beforeMount() in Vue2.x und zeigt an, dass die Komponente hängt. Das Ereignis vor dem Laden in das DOM wird ausgeführt, nachdem die Funktion setup() ausgeführt wurde. 🎜🎜Das Folgende ist ein Beispiel für die Verwendung von onBeforeMount(): 🎜rrreee🎜Im obigen Beispiel wird die Funktion onBeforeMount() ausgeführt, bevor die Komponentenvorlage gemountet wird Das DOM. Die Konsolenausgaben ausgeführt vor der Komponentenmontage. 🎜🎜Montagephase🎜🎜In der Montagephase stellt Vue3 zwei Lebenszyklus-Hook-Funktionen bereit: onMounted() und onBeforeUpdate(). 🎜🎜onMounted()🎜🎜onMounted() ähnelt montiert() in Vue2.x und zeigt an, dass die Komponente auf dem gemountet ist DOM-Ereignis, es wird ausgeführt, nachdem die Funktion setup() ausgeführt wurde. 🎜🎜Das Folgende ist ein Beispiel für die Verwendung von onMounted(): 🎜rrreee🎜Im obigen Beispiel verwenden wir die Funktion ref, um eine Nachrichtzu erstellen > Variable und verwenden Sie {{ message }} in der Vorlage, um den Text zu rendern, und verwenden Sie dann die Funktion onMounted(), um auszugeben, dass die -Komponente gemountet wurde auf im DOM und Verweise auf div-Elemente in der Komponente. 🎜🎜onBeforeUpdate()🎜🎜onBeforeUpdate() ähnelt beforeUpdate() in Vue2.x und gibt das Ereignis an, bevor die Komponente aktualisiert wird Es wird ausgeführt, nachdem sich der Status der Komponente geändert hat und bevor die Ansicht erneut gerendert wird. 🎜🎜Das Folgende ist ein Beispiel für die Verwendung von onBeforeUpdate(): 🎜rrreee🎜Im obigen Beispiel verwenden wir die Funktion ref, um eine Nachrichtzu erstellen > Variable und verwenden Sie {{ message }} in der Vorlage, um den Text zu rendern, und verwenden Sie dann die Funktion onBeforeUpdate(), um den Wert der aktuellen Nachricht vor dem auszugeben Komponente wird aktualisiert. 🎜🎜Update-Phase🎜🎜In der Update-Phase stellt Vue3 zwei Lebenszyklus-Hook-Funktionen bereit: onUpdated() und onDeactivated(). 🎜🎜onUpdated()🎜🎜onUpdated() ähnelt updated() in Vue2.x, das das Ereignis nach der Komponente darstellt Es wird aktualisiert, nachdem sich der Status der Komponente geändert und die Ansicht neu gerendert wurde. 🎜🎜Das Folgende ist ein Beispiel für die Verwendung von onUpdated(): 🎜rrreee🎜Im obigen Beispiel verwenden wir die Funktion ref, um eine Nachrichtzu erstellen > Variable und verwenden Sie {{ message }} in der Vorlage, um den Text darzustellen, und verwenden Sie dann die Funktion onUpdated(), um den Wert der aktuellen Nachricht nach dem auszugeben Komponente wird aktualisiert. 🎜🎜onDeactivated()🎜🎜onDeactivated() ähnelt deactivated() in Vue2.x und gibt das Ereignis an, nachdem die Komponente aktiviert wurde . Es wird ausgeführt, wenn die Komponente vom aktiven in den inaktiven Zustand wechselt. 🎜🎜Das Folgende ist ein Beispiel für die Verwendung von onDeactivated(): 🎜rrreee🎜Im obigen Beispiel verwenden wir die Funktion ref, um eine Nachrichtzu erstellen > Variable und verwenden Sie {{ message }} in der Vorlage, um den Text zu rendern, und verwenden Sie dann die Funktion onDeactivated(), um komponente aktiviertauszugeben > wenn die Komponente aktiviert ist. 🎜🎜Zerstörungsphase🎜🎜In der Zerstörungsphase stellt Vue3 eine Lebenszyklus-Hook-Funktion bereit: onUnmontiert(). 🎜🎜onUnmontiert()🎜

onUnmounted()与Vue2.x中的beforeDestroy()类似，表示组件销毁的事件，它会在组件被销毁之前执行。

下面是一个使用onUnmounted()的例子：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { onUnmounted, ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    onUnmounted(() => {
      console.log('组件被销毁')
    })

    return {
      message
    }
  }
}
</script>

上面的例子中，我们使用ref函数创建了一个message变量，并在模板中使用{{ message }}渲染出文本，然后使用onUnmounted()函数，在组件被销毁时输出 组件被销毁。

总结

本文介绍了Vue3中的生命周期钩子函数，它们包括创建阶段的setup()和onBeforeMount()，挂载阶段的onMounted()和onBeforeUpdate()，更新阶段的onUpdated()和onDeactivated()，以及销毁阶段的onUnmounted()。掌握这些生命周期钩子函数，可以帮助我们更好地理解Vue3组件的生命周期，并且在开发Vue3应用时更加得心应手。

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Lebenszyklus-Hook-Funktion in Vue3: Umfassende Beherrschung der Anwendung des Vue3-Lebenszyklus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!