Web Course 9 – 新手教程：改善内容管理用户体验

这一节课主要涉及内容：Nuxt Content 列表刷新问题解决、用户体验优化 之前我们实现了一个随机鸡汤的小功能，但是细心的同学就会发现，刷新的时候，会存在两次渲染的情况 这跟 Nuxt 的渲染机制有关系，有时候是服务端渲染了一遍，客户端又渲染一遍，关于这个问题，问了一下 AI，绘制了如下答案：https://claude.site/artifacts/8a49b28c-bc0d-401e-97f3-9fb401b3042b 要规避这个问题，我们需要对既有代码进行改造，首先了解一下背景知识： Javascript 的相关知识： 入门-函数：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/function 进阶-函数与箭头函数：https://es6.ruanyifeng.com/#docs/function Vue 的相关知识：Ref：https://vuejs.org/api/reactivity-core.html#ref Nuxt 的相关知识 入门-渲染模式：https://nuxt.com/docs/guide/concepts/rendering 进阶-生命周期： 官方生命周期勾子：https://nuxt.com/docs/api/advanced/hooks 生命周期讲解：https://blog.nuxtdojo.com/p/2-understanding-lifecycle-hooks-in useAsyncData：https://nuxt.com/docs/api/composables/use-async-data useFetch：https://nuxt.com/docs/api/composables/use-fetch 问题解决 官方文档的解决方案： https://content.nuxt.com/composables/query-content https://nuxt.com/docs/api/composables/use-async-data 课程中的解决方案： 课堂中使用的解决方案，直接采纳了 AI 的意见以及一些历史经验，但不是最优解，应该使用文档中使用的方案 使用函数 在 onMounted 中调用函数 一些优化 添加题图显示： https://content.nuxt.com/components/content-renderer 开发者工具使用 一些样式的调整 加载状态的显示：Nuxt UI Placeholder 组件 加一个主动刷新的按钮：Button 和 click 事件绑定 课后作业 修正两次渲染的问题 有余力的同学可以尝试使用不同的方案 优化这个页面的用户体验 Loading 刷新按钮 tags…...