我的Vue应用程序使用服务器端呈现。当应用程序加载并保持水分时,我想检测客户端上的情况,然后提交变异。
如果我在安装应用程序之前触摸状态,则会打印此警告 - 正如所料:
[Vue警告]:客户端呈现的虚拟DOM树不匹配 服务器呈现的内容。这可能是由错误的HTML引起的 标记,例如在
<p>
内嵌套块级元素,或 遗失<tbody>
。 Bailing水化和表现完全客户端 渲染。
我以为我会找到一个钩子,在水化完成后立即调用。
我尝试在主要组件的mounted
挂钩中提交变异。我也尝试在app.$mount(...)
之后和Vue.nextTick()
之后进行此操作。所有这些都太早了:在每一个案例中,我都得到了上述警告。
我找到了两个解决方法:
在子组件中添加mounted
挂钩,该挂钩将以修改后的状态呈现不同的颜色。在父钩子之后,该钩子被称为。好的,因为我只需要在一个地方使用它。但是当我需要它在两个不同的组件中时会变脏。
使用晦涩的setTimeout()
。容易打破,因为我发现没有简单的方法来检查水合作用是否完整,所以我不能轮询。 (水合开始时,data-server-rendered
属性将被删除。)
任何想法如何正确解决?