Comment déboguer l'erreur « Incompatibilité de l'arborescence DOM virtuelle

Comment déboguer l'erreur « Incompatibilité de l'arborescence DOM virtuelle » dans Vue.js/Nuxt.js ?

DDD

Libérer： 2024-11-15 03:28:02

original

1101 Les gens l'ont consulté

How to Debug the

Dépannage de l'erreur « Incompatibilité de l'arborescence DOM virtuelle » dans Vue.js/Nuxt.js

L'arborescence DOM virtuelle rendue côté client ne correspond pas au contenu rendu par le serveur" peut se produire dans les applications Vue.js/Nuxt.js en raison d'un balisage HTML incompatible ou d'éléments manquants. Pour déboguer cela efficacement, il est nécessaire d'identifier l'élément spécifique à l'origine du problème.

Inspectez l'arborescence DOM à l'aide des outils de développement Chrome

Ouvrez les outils de développement Chrome (appuyez sur F12).
Accédez à la page déclenchant l'erreur.
Faites défiler jusqu'au message d'erreur dans la console.
Cliquez sur le lien hypertexte de l'emplacement source (par exemple, vue.runtime.esm.js:574).
Définissez un point d'arrêt sur cette ligne.
Rechargez la page ou déclenchez à nouveau l'erreur.
Pause sur le point d'arrêt, qui devrait être dans la fonction "patch" dans "vue.runtime.esm.js."
Définissez un point d'arrêt sur la ligne 15 dans la fonction "hydrate", où l'assertion échoue.
Déclenchez à nouveau l'erreur et évaluez "elm" et "vnode" dans la console DevTools.
Examinez le contenu HTML de "elm" et comparez-le à la représentation du nœud DOM virtuel de "vnode" pour trouver l'élément spécifique. provoquant l'erreur.

Exemple d'incompatibilité HTML :

<div>
  <p>Server-rendered content <a>incorrectly nested inside</a></p>
</div>

Copier après la connexion

Représentation virtuelle de l'arborescence DOM :

h createElement(
  "div",
  // ...props
  [
    h(
      "p",
      // ...props
      [
        h(
          "a",
          // ...props
          "incorrectly nested inside"
        ),
      ],
    ),
  ],
)

Copier après la connexion

L'erreur se produit car dans l'arborescence DOM virtuelle rendue côté client, le est un enfant direct de l'élément

, alors que dans le contenu rendu par le serveur, il est imbriqué dans l'élément

élément. Cette incompatibilité entraîne l'échec du processus d'hydratation.

En suivant ces étapes, vous pouvez déterminer avec précision la cause première de l'erreur « incompatibilité de l'arborescence DOM virtuelle » et rectifier efficacement les problèmes de balisage HTML dans votre Vue.js/Nuxt. js.

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!