Explication détaillée de la fonction hook de cycle de vie dans Vue3 : Maîtrise complète de l'application du cycle de vie Vue3

Explication détaillée de la fonction de hook de cycle de vie dans Vue3 : maîtrise complète des applications de cycle de vie de Vue3

Vue, en tant que framework JavaScript populaire, a toujours reçu une attention et un amour généralisés. Avec la sortie de Vue3, sa fonction de hook de cycle de vie a également subi quelques modifications et optimisations. Comprendre la fonction de hook de cycle de vie de Vue3 est très important pour les développeurs front-end. Cet article présentera en détail la fonction hook de cycle de vie et son application dans Vue3.

Fonction hook de cycle de vie dans Vue3

La fonction hook de cycle de vie dans Vue3 est également divisée en quatre étapes : création, montage, mise à jour et destruction. Ci-dessous, nous présenterons en détail les fonctions de hook de cycle de vie de ces quatre étapes dans Vue3 et comment les utiliser.

Phase de création

Dans la phase de création, Vue3 fournit deux fonctions de hook de cycle de vie : setup() et onBeforeMount() code>. <code>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() est une nouvelle fonction de hook de cycle de vie introduite par Vue3, dans Vue3. La fonction doit être présente dans le code. La fonction setup() sera exécutée lors de l'initialisation du composant. Son objectif principal est de définir les données et les méthodes du composant. #🎜🎜##🎜🎜# L'utilisation de la fonction setup() est similaire aux data et aux methods dans Vue2.x. La fonction setup() déclare les données et les méthodes que le composant doit utiliser, comme indiqué ci-dessous : #🎜🎜#

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

#🎜🎜#Dans l'exemple ci-dessus, nous avons utilisé const</ code> Le mot-clé déclare une variable nommée <code>message avec la valeur 'Bonjour, Vue3 !' puis la renvoie en utilisant { dans le modèle { message }}</ code> peut restituer le contenu du texte. #🎜🎜##🎜🎜#<code>onBeforeMount()#🎜🎜##🎜🎜#onBeforeMount() Fonction hook de cycle de vie et beforeMount dans Vue2.x ( ) est similaire, indiquant l'événement avant que le composant ne soit monté sur le DOM. Il sera exécuté après l'exécution de la fonction setup(). #🎜🎜##🎜🎜#Ce qui suit est un exemple d'utilisation de onBeforeMount() : #🎜🎜#rrreee#🎜🎜#Dans l'exemple ci-dessus, le onBeforeMount()</code > fonction Il sera exécuté avant que le modèle de composant ne soit monté sur le DOM, et <code>exécuté avant le montage du composant sera affiché dans la console. #🎜🎜##🎜🎜#Phase de montage#🎜🎜##🎜🎜#Dans la phase de montage, Vue3 fournit deux fonctions de hook de cycle de vie : onMounted() et onBeforeUpdate()</ code>. #🎜🎜##🎜🎜#<code>onMounted()#🎜🎜##🎜🎜#onMounted() et Mounted() dans Vue2. x code> est similaire, indiquant un événement après le montage du composant sur le DOM. Il sera exécuté après l'exécution de la fonction setup(). #🎜🎜##🎜🎜#Ce qui suit est un exemple d'utilisation de onMounted() : #🎜🎜#rrreee#🎜🎜#Dans l'exemple ci-dessus, nous utilisons le ref</code > fonction Création d'une variable <code>message, utilisation de {{ message }} dans le modèle pour restituer le texte, puis utilisation de la fonction onMounted() dans le composant Après le montage, le composant a été monté sur le DOM est affiché, ainsi que la référence à l'élément div dans le composant. #🎜🎜##🎜🎜#onBeforeUpdate()#🎜🎜##🎜🎜#onBeforeUpdate() et beforeUpdate() dans Vue2. x code> est similaire, indiquant un événement avant la mise à jour du composant. Il sera exécuté après le changement d'état du composant et avant que la vue ne commence à restituer. #🎜🎜##🎜🎜#Ce qui suit est un exemple d'utilisation de onBeforeUpdate() : #🎜🎜#rrreee#🎜🎜#Dans l'exemple ci-dessus, nous utilisons le ref</code > fonction Création d'une variable <code>message, utilisation de {{ message }} dans le modèle pour restituer le texte, puis utilisation de la fonction onBeforeUpdate() dans le composant Affiche la valeur du message actuel avant la mise à jour. #🎜🎜##🎜🎜#Phase de mise à jour#🎜🎜##🎜🎜#Dans la phase de mise à jour, Vue3 fournit deux fonctions de hook de cycle de vie : onUpdated() et onDeactivated() </ code>. #🎜🎜##🎜🎜#<code>onUpdated()#🎜🎜##🎜🎜#onUpdated() et updated() dans Vue2. x code> est similaire, indiquant l'événement après la mise à jour du composant. Il sera exécuté après le changement d'état du composant et le rendu de la vue. #🎜🎜##🎜🎜#Ce qui suit est un exemple d'utilisation de onUpdated() : #🎜🎜#rrreee#🎜🎜#Dans l'exemple ci-dessus, nous utilisons le ref</code > fonction Création d'une variable <code>message, utilisation de {{ message }} dans le modèle pour restituer le texte, puis utilisation de la fonction onUpdated() dans le composant Affiche la valeur du message actuel après la mise à jour. #🎜🎜##🎜🎜#onDeactivated()#🎜🎜##🎜🎜#onDeactivated() et deactivated() dans Vue2. x code> est similaire, indiquant un événement après l'activation du composant. Il sera exécuté lorsque le composant passera de l'état activé à l'état inactif. #🎜🎜##🎜🎜#Ce qui suit est un exemple d'utilisation de onDeactivated() : #🎜🎜#rrreee#🎜🎜#Dans l'exemple ci-dessus, nous utilisons le ref</code > fonction Création d'une variable <code>message, utilisation de {{ message }} dans le modèle pour restituer le texte, puis utilisation de la fonction onDeactivated() dans les sorties du composant Le composant est activé lorsqu'il est activé. #🎜🎜##🎜🎜#Phase de destruction#🎜🎜##🎜🎜#Dans la phase de destruction, Vue3 fournit une fonction de hook de cycle de vie : onUnmount(). #🎜🎜##🎜🎜#onUnmount()#🎜🎜#

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应用时更加得心应手。

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!