Maison  >  Article  >  interface Web  >  Le rôle du monté en vue

Le rôle du monté en vue

下次还敢
下次还敢original
2024-05-09 14:51:191024parcourir

onMounted est le hook du cycle de vie de montage des composants dans Vue. Sa fonction est d'effectuer des opérations d'initialisation une fois le composant monté sur le DOM, telles que l'obtention de références aux éléments DOM, la définition de données, l'envoi de requêtes HTTP, l'enregistrement d'écouteurs d'événements, etc. Il n'est appelé qu'une seule fois lorsque le composant est monté. Si vous devez effectuer des opérations après la mise à jour du composant ou avant sa destruction, vous pouvez utiliser d'autres hooks de cycle de vie.

Le rôle du monté en vue

Le rôle de onMounted dans Vue

onMounted est l'un des hooks du cycle de vie de Vue, ce qui signifie qu'il est appelé une fois le composant monté sur le DOM. Sa fonction principale est :

Effectuer des opérations liées au montage du composant

Une fois le composant monté sur le DOM, vous pouvez effectuer certaines opérations d'initialisation, telles que :

  • Obtenir la référence de l'élément DOM
  • Définir les données ou des attributs
  • Envoyer une requête HTTP
  • Enregistrer un écouteur d'événement

Demande de données complète ou opération asynchrone

Si vous avez besoin d'obtenir des données ou d'effectuer des opérations qui prennent du temps après le montage du composant, vous pouvez le faire dans le onMounted crochet. Cela garantit que lorsque les données ou l'opération sont terminées, le composant répond en conséquence.

Par exemple :

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

Remarque :

  • onMounted hook n'est appelé qu'une seule fois lorsque le composant est monté.
  • Si vous devez effectuer une opération après la mise à jour du composant, vous pouvez utiliser le hook onUpdated.
  • Si vous devez effectuer des opérations de nettoyage avant que le composant ne soit détruit, vous pouvez utiliser le hook onBeforeUnmount.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn