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