NuxtJs 3.x 实战记录

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