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';