La vue peut-elle encore être modifiée une fois montée ?

Vue.js est un framework frontal populaire dont l'idée principale est basée sur les données et composée de composants. Dans Vue.js, nous pouvons facilement créer des pages de manière composée et utiliser la fonction de liaison de données fournie par Vue.js pour réaliser le transfert de données.

Dans Vue.js, nous montons généralement notre composant racine en instanciant un objet Vue et en spécifiant l'élément DOM à restituer. Une fois l'instance Vue montée, vous pouvez commencer à restituer la vue et utiliser la fonctionnalité de liaison de données pour lier les données à la vue.

Dans de nombreux cas, nous souhaiterons modifier les éléments DOM montés après le montage de l'instance Vue. Par exemple, nous pouvons souhaiter ajouter de nouveaux éléments à la page après avoir cliqué sur un bouton. Dans ce cas, pouvons-nous modifier les éléments DOM montés après le montage de l'instance Vue ? Cet article répondra à cette question et donnera la solution correspondante.

1. Modifier directement les éléments DOM

Le moyen le plus simple consiste à exploiter directement les éléments DOM via JavaScript, à ajouter, supprimer et modifier des nœuds DOM. Cependant, cette méthode n'est pas conforme à l'idée de conception de Vue.js, car la liaison de données dans Vue.js est basée sur le DOM virtuel. Si vous exploitez directement des éléments DOM, cette opération ne sera pas surveillée par Vue.js. et vous ne pourrez pas obtenir de mises à jour réactives en conséquence. Par conséquent, nous ne devons pas manipuler directement les éléments du DOM.

2. Obtenir les éléments DOM par référence

Une fois l'instance Vue montée, nous pouvons obtenir les éléments DOM montés par référence. Cette méthode peut garantir que Vue.js fonctionne normalement. Il suffit de définir un attribut ref dans le composant racine, puis d'utiliser l'objet $refs pour référencer cet élément DOM. Par exemple :

<template>
  <div ref="root"></div>
</template>

Ici, nous définissons un attribut ref nommé root et le lions à un élément div vide.

Une fois l'instance Vue montée, nous pouvons accéder à cet élément DOM via l'objet $refs. Par exemple, nous pouvons accéder à cet élément via $refs.root dans la fonction hook de cycle de vie montée et y apporter des modifications. Par exemple :

mounted() {
  const root = this.$refs.root
  root.innerHTML = '<p>Hello, world!</p>'
}

Ici, nous obtenons l'élément DOM du composant racine dans la fonction hook montée, puis modifions son contenu en "<p>Hello, world!</p>" via l'attribut innerHTML.

3. Modifiez les éléments DOM via le mécanisme de rendu asynchrone de Vue.js

Vue.js version 2.5 et supérieure prend en charge le mécanisme de rendu asynchrone. Dans le cadre de ce mécanisme, nous pouvons utiliser la méthode Vue.nextTick() une fois l'instance de Vue terminée. monté. Modifiez les éléments DOM et obtenez les mises à jour réactives correspondantes. Par exemple :

mounted() {
  this.$nextTick(() => {
    const root = this.$el
    root.innerHTML = '<p>Hello, world!</p>'
  })
}

Ici, nous utilisons la méthode $nextTick dans la fonction hook montée pour placer l'opération DOM dans le prochain cycle de mise à jour du DOM. Cela garantit que la mise à jour du DOM est terminée avant de continuer, garantissant ainsi le bon fonctionnement de Vue.js.

Résumé

Dans Vue.js, nous pouvons obtenir des éléments DOM montés par référence ou modifier des éléments DOM via le mécanisme de rendu asynchrone. Cela garantit que Vue.js fonctionne correctement et est mis à jour de manière réactive en conséquence. Dans le même temps, évitez de manipuler directement les éléments du DOM pour éviter d'endommager le mécanisme de liaison de données de Vue.js et de provoquer des problèmes inutiles.

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!