vue nuxt 服务器渲染和缓存

最新推荐文章于 2025-04-07 10:19:38 发布

--jerry

最新推荐文章于 2025-04-07 10:19:38 发布

阅读量980

点赞数

分类专栏： javaScript 文章标签：缓存 vue.js html

本文链接：https://blog.youkuaiyun.com/qq_40693662/article/details/120536918

版权

javaScript 专栏收录该内容

6 篇文章

订阅专栏

vue nuxt 服务器渲染和缓存

我们都知道vue，react，angular 是现在前端技术栈非常优秀的框架，但是跟上帝造人一样，没有任何东西是100%的完美。比如seo，单页面应用是不存在seo的。

seo（网站性能优化）

很多前端开发者都听说过seo，但是没有实际把它应用到自己项目中。（本次就不介绍seo的相关内容）

vue本身开发出来是没有seo的，nuxt完美的结局了这个缺陷。具体操作，请阅读：https://www.nuxtjs.cn/.
ssr，服务器渲染原理：node端发送异步请求然后渲染出html静态页面返回给前端浏览器。服务器上会执行asyncData函数，供我们在服务器上进行一些逻辑操作
asyncData函数，执行在服务端，用于在服务端获取数据，该函数有一个return值，返回值会改变页面的data。
缓存（keep-alive），缓存页面组件，切换路由时页面不会重新执行原来的生命周期，但是会执行一个（activated）的钩子函数。

接下来是一个悲伤的故事，我今天开心的穿上了新买的格子衬衫。背上了电脑包。到公司板凳没有捂热，我被公司客服小妹妹告知我有一个线上bug，嗯？一切都来得太突然了。

事情是这样的，在详情页面有一个收藏功能，但是这个详情页面进行了（keep-alive）缓存。

ps: 为什么会在详情页面进行缓存呢（因为数据列表和详情都是用的动态路由，在列表页进行了页面缓存，连带着详情页面也做了缓存。这点在最初的开发中就没有设计好）
在这里插入图片描述
然后在我的收藏页面有一个取消收藏的功能

就这样发生了一个离奇的事件，当在这个页面取消收藏后对应的详情页并没有取消收藏。

到此时胸弟们第一个想法肯定是想详情页进行了缓存，没有进行接口请求。当然我也是这样想的，所以我又去理了一下代码的逻辑。

/** 这是在asyncData里面执行的网络请求  */ 

return await $axios
        .get("/index/new-view?source=M", {
          params: { mode, info },
        })
        .then((res) => {
          if (res.code == 200) {
            console.log(res.content, "res.content----");
            return {
              detail_info: { ...res.content },
              mode,
            };
          }
        });

一顿行云流水的操作，打了一行console.log()，然后到浏览器上看到了不该看到的东西，真是辣👀。
在这里插入图片描述
就这样，我在公司协助软件上问候了客服妹妹。妹儿啊，这个问题今天上午是搞不完了，下午改完了上线吧😭

结语

其实这个问题很简单，解决也比较容易，但就是像某种东西一样恶心人的。它的问题出现在。当页面进行了缓存，asyncData函数是在服务器上进行了请求拿到了数据，也把值return了出去，但是它的return并没有更新data里面的值，导致数据是上一次的缓存数据。从而导致了数据不更新。

return await $axios
        .get("/index/new-view?source=M", {
          params: { mode, info },
        })
        .then((res) => {
          if (res.code == 200) {
          // 拿到store对象，进行赋值
            store.commit("setDetailData", { ...res.content });
            return {
              detail_info: { ...res.content },
              mode,
            };
          }
        });

/** 通过computed得到vuex里面的值 */
computed: {
    ...mapState(["userinfo", "alertWindow", "detailData"]),
  },
/** 页面进行缓存后，进入页面执行的钩子 */ 
activated() { 
	console.log(this.detailData)
 }

如有问题望胸弟，集美们指出