之前没有注意到这个问题,后面项目要上线了,发现这个抖动还挺明显的,记录下解决问题的过程。
原因
一开始一直刷新页面,然后发现一个根据用户登录状态切换按钮和头像会在开始的时候显示未登录的按钮,然后后面就开始切换到登录状态的按钮。
过程
一开始, 看到这个抖动,我认为是v-if切换的时候,dom渲染造成的,也许是因为没有key,然后更新策略就不成功,后面我试了试加了key,发现这个问题还存在。
然后,试了试调整位置,但是还是没有用。
试了试,我发现如果不销毁的话,隐藏会不会起作用,但发现好像还是没有用。
这时候,我觉得就是因为服务端渲染了一次,初始化了,后面请求回到浏览器的时候,又渲染了处理好后的dom结构,后面我就去看看nuxt3的官网文档有没有只在浏览器时候渲染的。
去官网文档看到这个组件,嵌套在这组件里面的子元素只在浏览器的时候渲染。
解决
最后用上这个组件,抖动的问题就解决了。