我的Vue应用程序使用服务器端呈现 . 当应用程序加载并保持水分时，我想检测客户端上的状况，然后提交变异 .
如果我在安装应用程序之前触摸状态，则会打印此警告 - 正如所料：
[Vue警告]：客户端呈现的虚拟DOM树与服务器呈现的内容不匹配 . 这可能是由不正确的HTML标记引起的，例如在<p>中嵌套块级元素或缺少<tbody> . Bailing水化和执行完整的客户端渲染 .
我以为我会找到 hook that would be called right after the hydration is done .
我尝试在主要组件的 mounted 钩子中提交变异 . 我也试过在 app.$mount(...) 之后和 Vue.nextTick() 这样做 . 所有这些都太早了：在每一种情况下，我都得到了上述警告 .
我找到了两个解决方法：
-
在子组件中添加一个
mounted钩子，该钩子将以修改后的状态呈现不同的方式 . 在父钩子之后调用该钩子 . 好的，因为我只需要在一个地方使用它 . 但是当我在两个不同的组件中需要它时会变脏 . -
使用了一个不起眼的
setTimeout(). 容易打破，因为我发现没有简单的方法来检查水合作用是否完整，所以我不能轮询 . （水合作用开始时，data-server-rendered属性被删除 . ）
任何想法如何正确解决？