Vuejs 오류: 클라이언트 렌더링 가상 DOM 트리가 서버 렌더링과 일치하지 않습니다.

Question

내 앱에서 Nuxt.js/Vuejs를 사용하고 있는데 다른 위치에서 계속 이 오류가 발생합니다.

클라이언트 측에서 렌더링된 가상 DOM 트리가 서버에서 렌더링된 콘텐츠와 일치하지 않습니다.
이는 잘못된 HTML 마크업(예: <p> 내에 블록 수준 요소가 중첩되거나 <tbody>이 누락됨)으로 인해 발생할 수 있습니다.
수분 공급을 중단하고 전체 클라이언트측 렌더링을 수행합니다.

이 오류를 디버깅하는 가장 좋은 방법이 무엇인지 알고 싶습니다. 이것이 오류가 있는 위치를 비교하고 찾을 수 있도록 클라이언트와 서버의 가상 DOM 트리를 기록/가져오는 방법입니까?

내 신청서의 용량이 커서 수동으로 확인하기가 어렵습니다.

Answer 1

저에게 이 오류는 AsyncData 中获取数组列表并通过 v-for 渲染 标签，我把 块中的 >v-for 코드에서 문제를 해결했기 때문에 발생했습니다

Answer 2

일부 답변: Chrome DevTools를 사용하면 문제를 찾고 문제를 일으키는 요소가 무엇인지 정확하게 확인할 수 있습니다. 다음을 수행하세요(저는 Nuxt 5.6.0 및 Chrome 64.0.3282.186을 사용하여 이 작업을 수행했습니다)

1. Chrome에서 개발자 도구 표시(F12)
2. "클라이언트 측 렌더링된 가상 DOM 트리..." 경고가 나타나는 페이지를 로드하는 중입니다.
3. DevTools 콘솔에서 경고로 스크롤하세요.
4. 경고의 소스 위치 하이퍼링크(제 경우에는 vue.runtime.esm.js:574)를 클릭하세요.
5. 여기에 중단점을 설정합니다(소스 코드 브라우저에서 줄 번호를 마우스 왼쪽 버튼으로 클릭).
6. 동일한 경고가 다시 표시되도록 하세요. 이것이 항상 가능하다고 말하는 것은 아니지만 제 경우에는 페이지를 새로 로드했습니다. 경고가 많은 경우 msg 변수 위로 마우스를 이동하면 메시지를 볼 수 있습니다.
7. 메시지를 찾아 중단점에서 중지하면 호출 스택을 살펴보세요. 소스 코드를 열려면 다음 프레임 호출 "패치"를 클릭하세요. patch 中执行行上方 4 行的 Hydro 函数调用上。将打开指向Hydrate소스 하이퍼링크 위로 마우스를 가져갑니다.
8. 에 enchanted 函数中，从开头移动大约 15 行，并设置一个断点，在 assertNodeMatch 返回后返回 false 假. 거기에 중단점을 설정하고 다른 모든 중단점을 삭제합니다.
9. 또 같은 경고입니다. 이제 중단점에 도달하면 실행은 enchanted 函数中停止。切换到 DevTools 控制台并评估 elm，然后评估 vnode에서 이루어져야 합니다. 여기서 elm은 서버에서 렌더링되는 DOM 요소로 나타나고 vnode는 가상 DOM 노드로 나타납니다. Elm은 오류가 발생한 위치를 파악할 수 있도록 HTML로 인쇄합니다.