version: Nuxt 2
[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.
用Nuxt做了两个项目了,遇到过两次这个问题,
第一次是因为vuex中初始化了数据结构,在用户端接口获得数据后更改了,然后用了这个数据渲染的Dom就报的这个。 https://www.jianshu.com/p/0063d7303b7d
第二次是在asyncData 里获取了一个数组赋值到data里的list上,然后computed 里对list做了list.splice(),使用这个computed 渲染的dom在服务端渲染的时候会报这个错。
总结起来看起来像是用于渲染dom的数据在服务端和客户端不一致,我也没看过源码,不知道具体是为什么,目前就是用其他写法先规避了,遇到同样问题的同学可以借鉴一下,也希望知道具体问题的大佬指点一下~
网友评论