努克斯特:怎么知道水化已经完成了？

Question

Situation

当用户返回网站时，我保存用户访问过的旅游页面，以便在主页上显示“最近访问的旅游”。参观了我和vuex-persistedstate一起保存的旅游。

代码很简单：<TheVisitedTours v-show=toursRecentlyViewed.length" />

问题

当用户回来时，就会出现下一个水化问题：

Parent:  <div style=​"display:​none;​" data-v-24f9a6f4>​…​</div>​ 

Mismatching childNodes vs. VNodes:  NodeList(3) [comment, text, comment] (5) [VNode, VNode, VNode, VNode, VNode]
 
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

很明显，SSR没有访问旅游的信息，vuex-persistedstate在水化结束之前恢复访问旅游的信息。

如果我使用v-show而不是v-如果我看到：

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

我试过将它封装到<client-only>...</client-only>中，但没有帮助。

此外，我还试图使用：

mounted () {
  this.isMounted = true
}

和

mounted () {
  window.onNuxtReady(() => {
    this.isMounted = true
  })
}

使用

<TheVisitedTours v-if=isMounted && toursRecentlyViewed.length" />

但它也不起作用。

问题

有什么我能听到的事件来知道水化已经结束了吗？如果没有，也许有人有什么解决办法？

非常感谢。

Answer 1

找到解决办法了。

我的初始代码使用了缓水化

<LazyHydrate when-visible>
  <b-container>

    ......
  
    <client-only>
      <TheVisitedTours v-show=toursRecentlyViewed.length" />
    </client-only>
  </b-container>
</LazyHydrate>

一旦LazyHydrate被删除，<client-only>就修复了一个问题。