DOM树问题

在项目遇到客户端DOM和服务端内容不一致的问题,在本地运行时,不会由任何影响,当项目部署上线之后,产生的问题就很严重了,对导致项目页面打不开。
问题重现:
HTML代码:

<template>
  <div>
    <div>
        <p>其他内容</p>
    </div>
    提示: {{ tips || "暂无" }}
  </div>
</template>

会出现如下错误:

[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

意思是:客户端呈现的虚拟DOM树与服务器呈现的内容不匹配。

原因:
没有使用正确的标签语法。导致客户端和服务端渲染出来的结果不一致

解决办法:
1,使用正确的标签语法

<div>提示: {{ tips || "暂无" }}</div>

2,使用<client-only>组件只在客户端进行渲染此段代码。

<client-only>
  <div>提示: {{ tips || "暂无" }}</div>
</client-only>

知道的越多,不知道的也就越多。

26 声望
4 粉丝
0 条评论
推荐阅读
【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 2.9k

CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan29阅读 3.6k评论 2

封面图
除了 filter 还有什么置灰网站的方式?
大家都知道,当一些重大事件发生的时候,我们的网站,可能需要置灰,像是这样:当然,通常而言,全站置灰是非常简单的事情,大部分前端同学都知道,仅仅需要使用一行 CSS,就能实现全站置灰的方式。像是这样,我...

chokcoco19阅读 1.7k评论 1

封面图
一个开源vue网站博客,nuxt开源网站,前后端分离项目
开媛笔记,基于nuxt ssr首屏服务器端渲染 。用于分享、记录、交流和学习,希望可以帮助到小伙伴们。同时网站在不断更新,创造属于猿(媛)的世界 -$Bao Yalong ..Let's Go! [链接]

jigsaw16阅读 8.5k评论 3

23个css动画效果,持续更新中...
代码github仓库:[链接]使用方式看名称效果图,有没有和自己想要的效果类似的有的话,复制粘贴代码使用也可以自己修改一下css效果并不是特别难,只是有时候我们可能想不到笔者空闲时间,会继续更新的哦,点赞关注...

水冗水孚9阅读 1.3k

封面图
你可能不知道的dialog弹窗
想必大家都知道 HTML5 中有 dialog 这样一个标签,顾名思义,就是“弹窗”。除了有良好的语义外,随着浏览器的不断更新迭代,还出现了许多你可能不知道的特性,快速了解一下吧~

XboxYan9阅读 585

封面图
两行CSS让页面提升了近7倍渲染性能!
对于前端人员来讲,最令人头疼的应该就是页面性能了,当用户在访问一个页面时,总是希望它能够快速呈现在眼前并且是可交互状态。如果页面加载过慢,你的用户很可能会因此离你而去。所以页面性能对于前端开发者来...

南玖9阅读 2k

封面图

知道的越多,不知道的也就越多。

26 声望
4 粉丝
宣传栏