By Noxxxx from https://www.noxxxx.com/?post_type=post&p=2104
欢迎分享与聚合,尊重版权,可以联系授权
WindiCSS
如果使用 windi.config.ts
配置文件,nuxt.config.ts
中就不要填写配置,否则会导致windi.config.ts
的配置不生效



数据相应式
列表通过接口数据返回渲染,当通过 html 自定义属性来控制图片中的 checkbox 的选中态时,需要把接口数据主动用 Vue 的相应式函数重新定义,比如用 reactive(data)
来重新声明,data
为接口返回函数,否则数据不会动态切换。

[Vue warn]: Hydration node mismatch
[Vue warn]: Hydration node mismatch:
- Client vnode: td
- Server rendered DOM: <!--]-->
at <Compare >
at <Anonymous key="compare" name="compare" hasTransition=false >
at <Anonymous >
at <Anonymous name="compare" >
at <Compare onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <Anonymous key="/compare" routeProps= {Component: {…}, route: {…}} pageKey="/compare" ... >
at <Anonymous >
at <RouterView name=undefined route=undefined >
at <NuxtPage>
at <App key=1 >
at <NuxtRoot>
首先检查代码逻辑是否有问题,包括 HTML 结构,优先注意在 table 里需要 <tbody>
包裹 tr
,其次观察是否类似视频中的现象:内容被重复渲染了,而且是网页刷新后异步渲染,非直出。
下面的这种写法就会引起上述的报错
const data = await Promise.all(list);
// const first = data[0]; // wrong!
const first = JSON.parse(JSON.stringify(data[0])); // correct
first.x = 'something';