V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Strive123456
V2EX  ›  Nuxt.js

nuxt3 大佬帮忙看个问题!

  •  
  •   Strive123456 · 14 天前 · 705 次点击
    项目里有一些页面用到了 new Date()函数,nuxt3 框架会在服务端和客户端都执行一遍,由于先在服务端后在客户端所以会有几毫秒的差别导致渲染不一致浏览器控制台报错: C6hVy1FW.js:14 Hydration completed but contains mismatches ,但是这个报错我在本地开发不会有,上到了测试环境就会有,有没有大佬遇到过这种报错?
    4 条回复    2025-04-30 10:51:35 +08:00
    yunyuyuan
        1
    yunyuyuan  
       14 天前
    你已经说出了问题所在啊,有两种办法:
    * 使用 useState('some-key', () => new Date()),这样只会在 ssr 的时候初始化一次,然后数据被存在 payload 里,带到了浏览器,浏览器 hydrate 的时候值没有改变
    * 如果这个值只会在浏览器用到,而且需要显示真正的页面加载完成时候的时间,可以这样写:const now = ref();onMounted(() => {now.value = new Date()})
    Strive123456
        2
    Strive123456  
    OP
       14 天前
    @yunyuyuan 大佬,为啥我用 useState 定义了 new Date()还是会报错呢?
    Whbbit1999
        3
    Whbbit1999  
       10 天前
    这种直接把这部分抽成组件,让它用 client only ?
    ossicee
        4
    ossicee  
       7 天前
    升级到 3.17.
    使用新的 <NuxtTime> 组件,用于安全地显示服务器端渲染时间,解决了与日期相关的同步问题
    ```vue

    <template>
    <NuxtTime :datetime="Date.now()" />
    </template>

    ```
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5423 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 06:54 · PVG 14:54 · LAX 23:54 · JFK 02:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.